Tailwind CSS needs no introduction. It is by far the most popular utility-based CSS framework in the world. And, recently, the framework saw a new release – v3.0 – which brings even more features and performance improvements.
The popularity of Tailwind CSS can largely be attributed to the fact that you don’t need to write any CSS to design a layout. As such, you can do all your development from within the HTML template itself. And the numbers speak for themselves.
Naturally, there has been quite a bit of debate about Tailwind and how it transforms the development process. There are some who despise it, while others swear by it.
The main difference between a framework like Bootstrap is that Tailwind requires you to design your own UI components. The emphasis is on custom development rather than pre-made layouts. This is also the premise of this article.
I’ve also written about Tailwind CSS libraries. Particularly, various component libraries and UI kits which can really help accelerate your design process. Best of all, for many of them – you can import their components directly as HTML snippets.
What are “Cards” in Web Design?
If I am being facetious – just slap a background-color with some box-shadow on an element and call it a card. That about sums it up. But, on a more serious note – cards help to distinguish important or noteworthy elements of the page design.
Another way to look at is through container-based designs. A card simply helps to highlight content that’s important. And, in turn, deliver a more consistent user experience.
A prime example of this is a platform like Facebook, which uses card-style design almost exclusively. Not only does it recreate a familiar user experience, but the cards themselves can also be used to organize many of the functions of the site.
Where is the code for these card designs?
All the code for these Tailwind card designs is hosted on CodePen. However, I have chosen not to embed the iframe to show it here directly. Instead, I have created a custom image for each card showcasing what it looks like. My reasoning is quite simple.
I am not a fan of using embeds on this blog. And, I think images do a great job at providing a quick overview of the outcome. Below the description of each card, I have added a button that will take you to the CodePen page.
You can also copy and paste the code snippets to an HTML document and use the Tailwind CSS CDN to render the cards locally:
<!DOCTYPE html>
<html>
<head>
<title>Tailwind CSS - Card Designs</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<!-- Copy & Paste the snippets here -->
</body>
</html> Other than that, use them as you desire. And, I’d be more than happy to add some of your own custom card designs to this list. Hit me up in the comments below!
Contact Me Card
This is a stylish “get in touch” layout you can use at the bottom of your portfolio site.
Includes room for a cover picture, your phone number, email, and LinkedIn page. The icons are embedded as SVG directly, so replace them as you like.
Digital Product Card
Working on an eCommerce design? Grab this card for displaying products.
Ideal for digital products like templates and themes. Includes room for 3 custom images, product tags, and both a Preview and Buy Now button. Additionally, you can customize the description and include notable product features.
Last but not least, the style can easily be adapted to other use cases, also. For example, to display blog posts, highlight a portfolio, etc.
Product Features Card
One of the most common cards used in landing page design is the product features. This one will help you highlight 4 of the most prominent features of your product.
Includes room for icons as well, which are directly embedded as raw SVG.
Product Pricing Card
Pricing cards come in a plethora of varieties. This one, in particular, can serve as a nice boilerplate for what you want yours to look like. The “most popular” tag at the top can help distinguish which of your packages are selling the most. And, it’s a fairly common design element being used across a variety of SaaS product pricing pages.
Membership Pricing Card
This is another take on the pricing card style. If you provide only a single plan, this wide-width card will help you explain everything that users get with a membership.
Testimonial Card
Social proof is an inevitable part of business page layout design. And with this design, you can quickly highlight what others are saying about your product. Includes room for the brand logo (of the mention), their comment, and also the person who said it.
Blog Post Card
One of the things I love about blog-post cards is how much information they can convey. In this example, you can cover practically everything. The tags are associated with the blog post, author, and even details like reading time. And, a feature photo.
These kinds of designs for displaying blog posts have grown in popularity. And, they’re good for things like SEO, as well. If you can squeeze in categories and tags in the same tag, those little elements contribute greatly to your internal link structure.
Instagram Card
Want to build an Instagram clone? Probably not, way too much work! But, nevertheless – here is a nice little Instagram-style card built entirely with Tailwind CSS. And, it goes a long way to show the flexibility of Tailwind, too. There is no external CSS (other than Tailwind itself) used to render this card.
Use this one as a template to build intricate card designs for your personal project.
eCommerce Product Card
This is one of my favorite designs by far. So much detail in this card, and yet it doesn’t require writing any complex CSS queries or alignments. Ideal for large-scale eCommerce layouts that specialize in selling physical items.
Latest Project Card
This is a nice little snippet you can use on a portfolio site. Working on an open-source project? Show it to your readers. Mind you, this is only a template – so you still have to write the function to populate the data.
Statistics Card
Want to showcase your social following? This statistics card template should do the job.
Blog Article Card
Here we have another card design for blogs. This time, we are using a compact layout which also allows you to add tags. Especially good if you don’t use featured images.
Tweet Card (Small)
This is a sweet little example of a Twitter card as seen on mobile devices. Can be used in a wide range of design layouts. For example, link directories that go out to external sites. Also good for displaying reviews, or even blog posts if you like the minimal design.
Team Members Card
Any serious business page is going to need a “team members” section. And this unique card design will get it done for you. Includes profile photo, and room for details like work position. Additionally, you can add social media links like Twitter, Facebook, or Dribble.
Though, of course, these can be styled for personal preference.
Cookie Notice Card
And finally, we have a little cookie notice card. Simple, elegant, and straight to the point. I am sure you can find ways in which to repurpose this card for other uses.
A ripple in the pond
It goes without saying that these card designs play a small role in the overall design of your application or website. Though, it is quite evident that Tailwind CSS makes it simple to design stylish cards without needing to write additional CSS!
I’ve been quite happy exploring this utility-first framework myself. It’s hard to overlook how popular it has become to be used in tandem with modern web development frameworks.
