tailwind布局实现一个电商购买提示效果代码-html代码-BFW代码库

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=".........完整代码请登录后点击上方下载按钮下载查看