tailwind布局清爽中性拟态音乐播放器ui效果代码-html代码-BFW代码库

tailwind布局清爽中性拟态音乐播放器ui效果代码

代码语言：html

代码描述：tailwind布局清爽中性拟态音乐播放器ui效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tailwind.2.01.css">
<style>
    body {
	background-color: #eaeef3;
}

.player {
	width: 20rem;
	border-radius: 1.5rem;
	box-shadow: 25px 25px 50px #c7cacf, 
             -25px -25px 50px #ffffff;
}

.art {
	box-shadow: 20px 20px 60px #c7cacf, 
             -20px -20px 60px #ffffff;
}


.play-button {
	background: #eaeef3;
	box-shadow: inset 5px 5px 10px #dce0e4, 
            inset -5px -5px 10px #f8fcff;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div class="">
	<div class="player p-6 mx-auto mt-10">
		<div class="flex justify-end">
			<button class="text-gray-700">
				<svg class="w-5 h-5 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M16 17a3 3 0 0 1-3 3h-2a3 3 0 0 1 0-6h2a3 3 0 0 1 1 .17V1l6-1v4l-4 .67V17zM0 3h12v2H0V3zm0 4h12v2H0V7zm0 4h12v2H0v-2zm0 4h6v2H0v-2z"/></svg>
			</button>
		</div>
		<div class="flex py-10">
			<img class="m-auto art rounded-lg object-cover w-48 h-48" src="//repo.bfw.wiki/bfwrepo/image/5ef9ef9fbf5b0.png" alt="">
		</div>
		<div class="text-center">
			<div class="text-sm font-medium text-gray-700">Gi-Fingers</div>
			<div class="text-xs font-semibold tracking-widest text-gra.........完整代码请登录后点击上方下载按钮下载查看