Skip to content

Instantly share code, notes, and snippets.

@sttt
Created February 2, 2022 12:24
Show Gist options
  • Save sttt/3d136237ae87057c2605f9fa3d78da13 to your computer and use it in GitHub Desktop.
Save sttt/3d136237ae87057c2605f9fa3d78da13 to your computer and use it in GitHub Desktop.
Post excerpt - Tailwind CSS
<!--
Include Tailwind JIT CDN compiler
More info: https://beyondco.de/blog/tailwind-jit-compiler-via-cdn
-->
<script src="https://unpkg.com/tailwindcss-jit-cdn"></script>
<!-- Specify a custom Tailwind configuration -->
<script type="tailwind-config">
{
theme: {
extend: {
colors: {
gray: colors.blueGray,
}
}
}
}
</script>
<!-- Snippet -->
<section class="flex flex-col justify-center antialiased bg-gray-50 text-gray-600 min-h-screen p-4">
<div class="h-full">
<!-- Card -->
<div class="max-w-2xl mx-auto bg-indigo-600 shadow-lg rounded-lg">
<div class="px-6 py-5">
<div class="flex items-start">
<!-- Icon -->
<svg class="fill-current flex-shrink-0 mr-5" width="30" height="30" viewBox="0 0 30 30">
<path class="text-indigo-300" d="m16 14.883 14-7L14.447.106a1 1 0 0 0-.895 0L0 6.883l16 8Z" />
<path class="text-indigo-200" d="M16 14.619v15l13.447-6.724A.998.998 0 0 0 30 22V7.619l-14 7Z" />
<path class="text-indigo-500" d="m16 14.619-16-8V21c0 .379.214.725.553.895L16 29.619v-15Z" />
</svg>
<!-- Card content -->
<div class="flex-grow truncate">
<!-- Card header -->
<div class="w-full sm:flex justify-between items-center mb-3">
<!-- Title -->
<h2 class="text-2xl leading-snug font-extrabold text-gray-50 truncate mb-1 sm:mb-0">Simple Design Tips</h2>
<!-- Like and comment buttons -->
<div class="flex-shrink-0 flex items-center space-x-3 sm:ml-2">
<button class="flex items-center text-left text-sm font-medium text-indigo-100 hover:text-white group focus:outline-none focus-visible:border-b focus-visible:border-indigo-100">
<svg class="w-4 h-4 flex-shrink-0 mr-2 fill-current text-gray-300 group-hover:text-gray-200" viewBox="0 0 16 16">
<path d="M14.682 2.318A4.485 4.485 0 0 0 11.5 1 4.377 4.377 0 0 0 8 2.707 4.383 4.383 0 0 0 4.5 1a4.5 4.5 0 0 0-3.182 7.682L8 15l6.682-6.318a4.5 4.5 0 0 0 0-6.364Zm-1.4 4.933L8 12.247l-5.285-5A2.5 2.5 0 0 1 4.5 3c1.437 0 2.312.681 3.5 2.625C9.187 3.681 10.062 3 11.5 3a2.5 2.5 0 0 1 1.785 4.251h-.003Z" />
</svg>
<span>498 <span class="sr-only">likes</span></span>
</button>
<button class="flex items-center text-left text-sm font-medium text-indigo-100 hover:text-white group focus:outline-none focus-visible:border-b focus-visible:border-indigo-100">
<svg class="w-4 h-4 flex-shrink-0 mr-2 fill-current text-gray-300 group-hover:text-gray-200" viewBox="0 0 16 16">
<path d="M8 0C3.6 0 0 3.1 0 7s3.6 7 8 7h.6l5.4 2v-4.4c1.2-1.2 2-2.8 2-4.6 0-3.9-3.6-7-8-7Zm4 10.8v2.3L8.9 12H8c-3.3 0-6-2.2-6-5s2.7-5 6-5 6 2.2 6 5c0 2.2-2 3.8-2 3.8Z" />
</svg>
<span>64 <span class="sr-only">comments</span></span>
</button>
</div>
</div>
<!-- Card body -->
<div class="flex items-end justify-between whitespace-normal">
<!-- Paragraph -->
<div class="max-w-md text-indigo-100">
<p class="mb-2">Lorem ipsum dolor sit amet, consecte adipiscing elit sed do eiusmod tempor incididunt ut labore et dolore.</p>
</div>
<!-- More link -->
<a class="flex-shrink-0 flex items-center justify-center text-indigo-600 w-10 h-10 rounded-full bg-gradient-to-b from-indigo-50 to-indigo-100 hover:from-white hover:to-indigo-50 focus:outline-none focus-visible:from-white focus-visible:to-white transition duration-150 ml-2" href="#0">
<span class="block font-bold"><span class="sr-only">Read more</span> -></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- More components -->
<div x-show="open" class="fixed bottom-0 right-0 w-full md:bottom-8 md:right-12 md:w-auto z-60" x-data="{ open: true }">
<div class="bg-gray-800 text-gray-50 text-sm p-3 md:rounded shadow-lg flex justify-between">
<div>👉 <a class="hover:underline ml-1" href="https://cruip.com/?ref=codepen-cruip-snippet-7" target="_blank">More components on Cruip.com</a></div>
<button class="text-gray-500 hover:text-gray-400 ml-5" @click="open = false">
<span class="sr-only">Close</span>
<svg class="w-4 h-4 flex-shrink-0 fill-current" viewBox="0 0 16 16">
<path d="M12.72 3.293a1 1 0 00-1.415 0L8.012 6.586 4.72 3.293a1 1 0 00-1.414 1.414L6.598 8l-3.293 3.293a1 1 0 101.414 1.414l3.293-3.293 3.293 3.293a1 1 0 001.414-1.414L9.426 8l3.293-3.293a1 1 0 000-1.414z" />
</svg>
</button>
</div>
</div>

Post excerpt - Tailwind CSS

A post excerpt in card-style built with Tailwind CSS.

A Pen by Cruip on CodePen.

License.

<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/3.5.2/cdn.js"></script>
section {
font-family: 'Inter', sans-serif;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment