Skip to content

Instantly share code, notes, and snippets.

@rg3915

rg3915/index.html

Last active October 15, 2022 08:05
Show Gist options
  • Save rg3915/7d1176afb0077ac9991bc2eb0b2a3d78 to your computer and use it in GitHub Desktop.
Save rg3915/7d1176afb0077ac9991bc2eb0b2a3d78 to your computer and use it in GitHub Desktop.
Download ZIP
tailwindcss grid layout flexbox tailwind card
Raw
index.html
<!-- https://daily-dev-tips.com/posts/tailwind-grid-responsive-4-column-blocks/ -->
<div class="container mx-auto">
<div class="gap-6 grid-cols-1 grid lg:grid-cols-4 md:grid-cols-2">
<div class="flex p-6 text-6xl bg-gray-100 justify-center border-2 border-gray-300 rounded-xl">
1
</div>
<div class="flex p-6 text-6xl bg-gray-100 justify-center border-2 border-gray-300 rounded-xl">
2
</div>
<div class="flex p-6 text-6xl bg-gray-100 justify-center border-2 border-gray-300 rounded-xl">
3
</div>
<div class="flex p-6 text-6xl bg-gray-100 justify-center border-2 border-gray-300 rounded-xl">
4
</div>
</div>
</div>
<!-- https://www.kindacode.com/article/tailwind-css-grid-examples/ -->
<!-- The grid parent -->
<div class="container mx-auto grid-cols-5 grid">
<!-- Header section -->
<header class="p-10 col-span-5 bg-amber-200">
<h1 class="text-2xl text-center">Header</h1>
</header>
<!-- Left menu -->
<aside class="p-10 col-span-5 bg-gray-700 md:col-span-1">
<h1 class="text-2xl text-center text-white">Menu</h1>
</aside>
<!-- Main content -->
<main class="h-96 p-10 col-span-5 bg-blue-200 md:col-span-3">
<h1 class="text-2xl text-center">Main Content</h1>
</main>
<!-- Right sidebar -->
<aside class="p-10 col-span-5 bg-rose-300 md:col-span-1">
<h1 class="text-2xl text-center">Sidebar</h1>
</aside>
<!-- Footter -->
<footer class="p-10 col-span-5 bg-green-300">
<h1 class="text-2xl text-center">Footer</h1>
</footer>
</div>
<br>
<div class="container mx-auto">
<div class="flex text-center flex-wrap">
<div class="w-full mb-8 px-3 bg-red-500 lg:w-1/4 md:w-1/2">
<!-- https://flowbite.com/docs/components/card/ -->
<div class="max-w-sm bg-white shadow-md border-gray-200 rounded-lg border dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<img class="rounded-t-lg" src="https://flowbite.com/docs/images/blog/image-1.jpg" alt="">
</a>
<div class="p-5">
<a href="#">
<h5 class="mb-2 font-bold text-2xl text-gray-900 tracking-tight dark:text-white">Noteworthy technology acquisitions 2021</h5>
</a>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
<a href="#" class="px-3 py-2 font-medium text-center text-sm text-white bg-blue-700 items-center rounded-lg dark:bg-blue-600 dark:focus:ring-blue-800 dark:hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300 hover:bg-blue-800 inline-flex">
Read more
<svg aria-hidden="true" class="h-4 w-4 -mr-1 ml-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</a>
</div>
</div>
</div>
<div class="w-full mb-8 px-3 bg-orange-400 lg:w-1/4 md:w-1/2">
<div class="max-w-sm w-full bg-white shadow-md border-gray-200 rounded-lg border dark:bg-gray-800 dark:border-gray-700">
<div class="flex pt-4 px-4 justify-end">
<button id="dropdownButton" data-dropdown-toggle="dropdown" class="p-1.5 text-gray-500 text-sm rounded-lg dark:focus:ring-gray-700 dark:hover:bg-gray-700 dark:text-gray-400 focus:outline-none focus:ring-4 focus:ring-gray-200 hover:bg-gray-100 inline-block" type="button">
<span class="sr-only">Open dropdown</span>
<svg class="h-6 w-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z"></path>
</svg>
</button>
<!-- Dropdown menu -->
<div id="dropdown" class="w-44 list-none text-base bg-white divide-gray-100 divide-y dark:bg-gray-700 hidden rounded shadow z-10" style="position: absolute; inset: 0px auto auto 0px; margin: 0px; transform: translate(0px, 10px);" data-popper-reference-hidden="" data-popper-escaped="" data-popper-placement="bottom">
<ul class="py-1" aria-labelledby="dropdownButton">
<li>
<a href="#" class="px-4 py-2 text-gray-700 text-sm block dark:hover:bg-gray-600 dark:hover:text-white dark:text-gray-200 hover:bg-gray-100">Edit</a>
</li>
<li>
<a href="#" class="px-4 py-2 text-gray-700 text-sm block dark:hover:bg-gray-600 dark:hover:text-white dark:text-gray-200 hover:bg-gray-100">Export Data</a>
</li>
<li>
<a href="#" class="px-4 py-2 text-red-600 text-sm block dark:hover:bg-gray-600 dark:hover:text-white dark:text-gray-200 hover:bg-gray-100">Delete</a>
</li>
</ul>
</div>
</div>
<div class="flex pb-10 flex-col items-center">
<img class="h-24 w-24 mb-3 shadow-lg rounded-full" src="https://flowbite.com/docs/images/people/profile-picture-3.jpg" alt="Bonnie image">
<h5 class="mb-1 font-medium text-gray-900 text-xl dark:text-white">Bonnie Green</h5>
<span class="text-gray-500 text-sm dark:text-gray-400">Visual Designer</span>
<div class="flex mt-4 space-x-3 md:mt-6">
<a href="#" class="px-4 py-2 font-medium text-center text-sm text-white bg-blue-700 items-center rounded-lg dark:bg-blue-600 dark:focus:ring-blue-800 dark:hover:bg-blue-700 focus:outline-none focus:ring-4 focus:ring-blue-300 hover:bg-blue-800 inline-flex">Add friend</a>
<a href="#" class="px-4 py-2 font-medium text-center text-gray-900 text-sm bg-white items-center border-gray-300 rounded-lg border dark:bg-gray-800 dark:border-gray-600 dark:focus:ring-gray-700 dark:hover:bg-gray-700 dark:hover:border-gray-700 dark:text-white focus:outline-none focus:ring-4 focus:ring-gray-200 hover:bg-gray-100 inline-flex">Message</a>
</div>
</div>
</div>
</div>
<div class="w-full mb-8 px-3 bg-yellow-300 lg:w-1/2 md:w-1/2">
<a href="#" class="flex bg-white flex-col items-center shadow-md rounded-lg border dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700 hover:bg-gray-100 md:flex-row md:max-w-xl">
<img class="h-96 w-full rounded-t-lg md:h-auto md:rounded-l-lg md:rounded-none md:w-48 object-cover" src="https://flowbite.com/docs/images/blog/image-4.jpg" alt="">
<div class="flex p-4 leading-normal flex-col justify-between">
<h5 class="mb-2 font-bold text-2xl text-gray-900 tracking-tight dark:text-white">Noteworthy technology acquisitions 2021</h5>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
</div>
</a>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment