Skip to content

Instantly share code, notes, and snippets.

@matt-daniel-brown

matt-daniel-brown/index.html

Created December 19, 2020 05:48
Show Gist options
  • Save matt-daniel-brown/e4b1eee596a8075ea9af356314d9293c to your computer and use it in GitHub Desktop.
Save matt-daniel-brown/e4b1eee596a8075ea9af356314d9293c to your computer and use it in GitHub Desktop.
Download ZIP
Lo-fi Content Grid 2 - Tailwind CSS
Raw
index.html
<body class="flex items-center justify-center w-screen min-h-screen p-10">
<!-- Resice the preview panel to check the responsiveness -->
<!-- Component Start -->
<div class="grid xl:grid-cols-4 md:grid-cols-2 grid-cols-1 gap-2 max-w-6xl">
<!-- Tile 1 -->
<div class="flex flex-col bg-gray-200 rounded-lg p-4 m-2">
<div class="h-40 bg-gray-400 rounded-lg"></div>
<div class="flex flex-col items-start mt-4">
<h4 class="text-xl font-semibold">Heading</h4>
<p class="text-sm">Some text about the thing that goes over a few lines.</p>
<a class="p-2 leading-none rounded font-medium mt-3 bg-gray-400 text-xs uppercase" href="#">Click Here</a>
</div>
</div>
<!-- Tile 2 -->
<div class="flex flex-col bg-gray-200 rounded-lg p-4 m-2">
<div class="h-40 bg-gray-400 rounded-lg"></div>
<div class="flex flex-col items-start mt-4">
<h4 class="text-xl font-semibold">Heading</h4>
<p class="text-sm">Some text about the thing that goes over a few lines.</p>
<a class="p-2 leading-none rounded font-medium mt-3 bg-gray-400 text-xs uppercase" href="#">Click Here</a>
</div>
</div>
<!-- Tile 3 -->
<div class="flex flex-col bg-gray-200 rounded-lg p-4 m-2">
<div class="h-40 bg-gray-400 rounded-lg"></div>
<div class="flex flex-col items-start mt-4">
<h4 class="text-xl font-semibold">Heading</h4>
<p class="text-sm">Some text about the thing that goes over a few lines.</p>
<a class="p-2 leading-none rounded font-medium mt-3 bg-gray-400 text-xs uppercase" href="#">Click Here</a>
</div>
</div>
<!-- Tile 4 -->
<div class="flex flex-col bg-gray-200 rounded-lg p-4 m-2">
<div class="h-40 bg-gray-400 rounded-lg"></div>
<div class="flex flex-col items-start mt-4">
<h4 class="text-xl font-semibold">Heading</h4>
<p class="text-sm">Some text about the thing that goes over a few lines.</p>
<a class="p-2 leading-none rounded font-medium mt-3 bg-gray-400 text-xs uppercase" href="#">Click Here</a>
</div>
</div>
</div>
<!-- Component End -->
</body>
Raw
lo-fi-content-grid-2-tailwind-css.markdown
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.8.10/tailwind.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment