tailwind布局实现一个电商购买提示效果代码
代码语言：html
所属分类：布局界面
代码描述：tailwind布局实现一个电商购买提示效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
.rotate-45 {
--transform-rotate: 45deg;
transform: rotate(45deg);
}
.group:hover .group-hover\:flex {
display: flex;
}
</style>
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tailwind.2.01.css">
</head>
<body >
<div class="flex flex-wrap items-center justify-center w-screen text-gray-500 min-h-screen bg-gray-50 p-10">
<div class="space-y-10 m-5">
<!-- Component Start -->
<div class="relative flex items-center pl-2 pr-6 w-72 max-w-full h-20 rounded-full bg-white shadow-lg hover:shadow-xl transition duration-100">
<img class="w-16 h-16 rounded-full" src="//repo.bfw.wiki/bfwrepo/image/5ff8f9c4688b7.png" alt="">
<p class="ml-4"><a href="#" class="text-blue-500 font-medium hover:underline hover:text-blue-600">Amara</a> has liked this product.</p>
<div class="absolute flex items-center justify-center w-8 h-8 rounded-full shadow-lg top-0 right-0 -mt-1 -mr-1 bg-red-400">
<svg class="w-5 h-5 fill-current text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd" />
</svg>
</div>
</div>
<!-- Component End -->
<!-- Component Start -->
<div class="relative flex items-center pl-2 pr-6 w-72 max-w-full h-20 rounded-full bg-white shadow-lg hover:shadow-xl transition duration-100">
<img class="w-16 h-16 rounded-full" src="//repo.bfw.wiki/bfwrepo/image/5ff8f9d574eb5.png" alt="">
<p class="ml-4"><a href="#" class="text-blue-500 font-medium hover:underline hover:text-blue-600">David</a> has purchased this product.</p>
<div class="absolute flex items-center justify-center w-8 h-8 rounded-full bg-green-400 shadow-lg top-0 right-0 -mt-1 -mr-1">
<svg class="w-5 h-5 fill-current text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd" />
</svg>
</div>
</div>
<!-- Component End -->
<!-- Component Start -->
<div class="relative flex items-center pl-2 pr-6 w-72 max-w-full h-20 rounded-full bg-white shadow-lg hover:shadow-xl transition duration-100">
<img class="w-16 h-16 rounded-full" src="//repo.bfw.wiki/bfwrepo/image/5ff8f9e5b4e43.png" alt="">
<p class="ml-4"><a href="#" class="text-blue-500 font-medium hover:underline hover:text-blue-600">Grace</a> has gifted this product.</p>
<div class="absolute flex items-center justify-center w-8 h-8 rounded-full bg-purple-400 shadow-lg top-0 right-0 -mt-1 -mr-1">
<svg class="w-5 h-5 fill-current text-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M5 5a3 3 0 015-2.236A3 3 0 0114.83 6H16a2 2 0 110 4h-5V9a1 1 0 10-2 0v1H4a2 2 0 110-4h1.17C5.06 5.687 5 5.35 5 5zm4 1V5a1 1 0 10-1 1h1zm3 0a1 1 0 10-1-1v1h1z" clip-.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0