tailgrids
Version:
Handcrafted Library of Tailwind CSS UI Components & Blocks for HTML, React and Vue.
74 lines (73 loc) • 2.54 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sticky Bar | TailGrids</title>
<link
rel="shortcut icon"
href="../../assets/images/favicon.svg"
type="image/x-icon"
/>
<link rel="stylesheet" href="../../assets/css/tailwind.css" />
</head>
<body>
<!-- ====== Sticky bar Start -->
<section class="bg-primary px-6 py-3">
<div class="relative pr-6">
<div
class="flex flex-wrap items-center justify-center gap-5 text-center"
>
<p class="inline-flex text-sm font-medium text-white lg:text-base">
Flat 70% Discount, Hurry Up to Grab the Deal! Sale ends in
</p>
<div
class="inline-flex items-center gap-1.5 text-lg font-medium text-white"
>
<span class="rounded-lg bg-white/10 px-4 py-2"> 3 </span>
<span> : </span>
<span class="rounded-lg bg-white/10 px-4 py-2"> 12 </span>
<span> : </span>
<span class="rounded-lg bg-white/10 px-4 py-2"> 49 </span>
<span> : </span>
<span class="rounded-lg bg-white/10 px-4 py-2"> 54 </span>
</div>
<a
href="javascript:void(0)"
class="text-sm font-medium text-white underline lg:text-base"
>
Get it now→
</a>
</div>
<button
class="absolute right-0 top-1/2 flex h-6 w-6 -translate-y-1/2 items-center justify-center text-white/50 duration-200 hover:text-white"
>
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#clip0_2390_1135)">
<path
d="M1.14288 1.14285L8.00003 8M8.00003 8L14.8572 14.8571M8.00003 8L14.8572 1.14285M8.00003 8L1.14288 14.8571"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_2390_1135">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
</button>
</div>
</section>
<!-- ====== Sticky bar End -->
</body>
</html>