📣 Tailwind Master Kit: 100+ Professional, ready to embed  Tailwind Components

Tailwind Card

Simple tailwind card design

Tailwind Card
import React from "react";
import Link from "next/link";

export default function CardBasic() {
  return (
      <div className="bg-gray-200 h-screen">
        <div className="px-8">
          <Link href="https://manuarora.in/snippets/tailwind-card">
              <div className="mx-auto lg:w-3/5 lg:flex lg:flex-row lg:h-auto ">
                  className="rounded-tr-md rounded-tl-md h-48 w-full lg:h-auto lg:w-2/5 lg:rounded-bl-md lg:rounded-tr-none"
                <div className="bg-white p-8 rounded-bl-md rounded-br-md lg:rouned-bl-none lg:rounded-tr-md">
                  <h2 className="text-gray-700 font-semibold">
                    Tailwind Ui Card
                  <p className="text-sm text-gray-600 mt-4">
                    Tailwind UI card is built with Tailwindcss, this minimal
                    card can be used for several purposes including business
                    cards, pricing and in general.
                  <div className="flex items-center mt-8">
                    <div className="flex items-center">
                        className="h-10 w-10 rounded-full"
                      <div className="ml-4">
                        <p className="text-gray-800 text-sm font-semibold">
                          Manu Arora
                        <p className="text-gray-400 text-sm">Next JS</p>

                    <div className="w-8 h-8 ml-auto bg-gray-200 rounded-full flex items-center justify-center">
                        viewBox="0 -22 512 511"
                        <path d="m512 233.820312-212.777344-233.320312v139.203125h-45.238281c-140.273437 0-253.984375 113.710937-253.984375 253.984375v73.769531l20.09375-22.019531c68.316406-74.851562 164.980469-117.5 266.324219-117.5h12.804687v139.203125zm0 0" />

Live Demo Source Code