Mirroring/merakiui
1
0
Fork 0
mirror of https://github.com/bakateam/merakiui.git synced 2025-12-08 22:53:24 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #94 from mr-muhammad-rehan/feat/light-themed-banner-component

Browse Source 
feat: Light Themed Banner Component
This commit is contained in:
Khatab Wedaa
2024-12-30 22:32:43 +03:00
committed by GitHub
parent 93e72c43e4 39ded766ad
commit ae8dfb148a
1 changed files with 44 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
components/banners/LightCentered.html Normal file
View File

@@ -0,0 +1,44 @@
<!DOCTYPE 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>Meraki UI Components</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<section class="bg-gray-50">
<div class="mx-auto max-w-screen-xl px-4 py-32 lg:flex lg:h-screen lg:items-center">
<div class="mx-auto max-w-xl text-center">
<h1 class="text-3xl font-extrabold sm:text-5xl">
Understand User Flow.
<strong class="font-extrabold text-gray-700 sm:block"> Increase Conversion. </strong>
</h1>
<p class="mt-4 sm:text-xl/relaxed">
Meraki UI is a collection of responsive Tailwind CSS components that enhance the user experience of
your
website. with support for RTL languages, and a sleek Dark Mode.
</p>
<div class="mt-8 flex flex-wrap justify-center gap-4">
<a class="block w-full rounded bg-gray-600 px-12 py-3 text-sm font-medium text-white shadow hover:bg-gray-700 focus:outline-none focus:ring active:bg-gray-700 sm:w-auto"
href="#">
Get Started
</a>
<a class="block w-full rounded px-12 py-3 text-sm font-medium text-gray-600 shadow border border-gray-400 hover:text-gray-700 focus:outline-none focus:ring active:text-gray-500 sm:w-auto"
href="#">
Learn More
</a>
</div>
</div>
</div>
</section>
</body>
</html>