forked from merakiuilabs/merakiui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Light Themed Banner Component'
closes issue merakiuilabs#93
- Loading branch information
AzureAD\MuhammadRehan(AIQU)
committed
Dec 9, 2024
1 parent
5041432
commit 39ded76
Showing
1 changed file
with
44 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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> |