Published on

Ways To Build A Social cards template With Tailwind CSS In 60 Minutes

Tags
CardsPages
Social cards template

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that focuses on creating personalized user interfaces quickly. It can gives you all the building blocks you are able to create personalized designs without having to fight to override irritating opinionated styles. Also, Tailwind CSS is a highly configurable, low-level CSS framework.

The description of Social cards template ui component

Template with multiple types of cards for social networks, see example with themes integration in👉 codesandbox.io/s/social-cards-template-xhwf1

Why use Tailwind CSS to create a Social cards template ui component?

  • It can make the building process of Social cards template ui component faster and more easily.
  • Enables building complex responsive layouts and components freely.
  • Minimum lines of CSS code in Social cards template component file.

The preview of Social cards template ui component

Free download of the Social cards template's source code

The source code of Social cards template ui component

<link href="https://fonts.googleapis.com/css2?family=Roboto:[email protected];400;500;700;900&display=swap" rel="stylesheet" />
<style>
    html,
    body {
        font-family: "Roboto", sans-serif;
    }
    .break-inside {
        -moz-column-break-inside: avoid;
        break-inside: avoid;
    }
</style>

<div class="flex py-8 items-center flex-col min-h-screen bg-slate-300">
    <!-- Wrapper-->
    <div class="wrapper">
        <!-- Content grid -->
        <div
        class="box-border max-w-7xl mx-4 sm:columns-1 md:columns-2 lg:columns-3 xl:columns-3"
        >
        <!-- Card-->
        <article
            class="mb-4 break-inside break-inside-avoid p-6 rounded-xl bg-white flex flex-col bg-clip-border max-w-md"
        >
            <div class="flex pb-6 items-center justify-between">
            <div class="flex">
                <a class="inline-block mr-4" href="#">
                <img
                    class="rounded-full max-w-none w-12 h-12"
                    src="https://randomuser.me/api/portraits/men/35.jpg"
                />
                </a>
                <div class="flex flex-col">
                <div>
                    <a class="inline-block text-lg font-bold" href="#"
                    >Wade Warren</a
                    >
                </div>
                <div class="text-slate-500">
                    July 17, 2018
                </div>
                </div>
            </div>
            </div>
            <h2 class="text-3xl font-extrabold">
            Web Design templates Selection
            </h2>
            <div class="py-4">
            <div class="flex justify-between gap-1 mb-1">
                <a class="flex" href="#">
                <img
                    class="max-w-full rounded-tl-lg"
                    src="https://images.pexels.com/photos/2457278/pexels-photo-2457278.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
                />
                </a>
                <a class="flex" href="#">
                <img
                    class="max-w-full"
                    src="https://images.pexels.com/photos/1343537/pexels-photo-1343537.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
                />
                </a>
                <a class="flex" href="#">
                <img
                    class="max-w-full rounded-tr-lg"
                    src="https://images.pexels.com/photos/327331/pexels-photo-327331.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
                />
                </a>
            </div>
            <div class="flex justify-between gap-1">
                <a class="flex" href="#">
                <img
                    class="max-w-full rounded-bl-lg"
                    src="https://images.pexels.com/photos/1279813/pexels-photo-1279813.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
                />
                </a>
                <a class="flex" href="#">
                <img
                    class="max-w-full rounded-br-lg"
                    src="https://images.pexels.com/photos/1209843/pexels-photo-1209843.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
                />
                </a>
            </div>
            </div>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
            <div class="py-4">
            <a class="inline-flex items-center" href="#">
                <span class="mr-2">
                <svg
                    class="fill-rose-600"
                    style="width: 24px; height: 24px;"
                    viewBox="0 0 24 24"
                >
                    <path
                    d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
                    ></path>
                </svg>
                </span>
                <span class="text-lg font-bold">34</span>
            </a>
            </div>
            <div class="relative">
            <input
                class="pt-2 pb-2 pl-3 w-full h-11 bg-slate-100 rounded-lg placeholder:text-slate-600 font-medium pr-20"
                type="text"
                placeholder="Write a comment"
            />
            <span class="flex absolute right-3 top-2/4 -mt-3 items-center">
                <svg
                class="mr-2"
                style="width: 26px; height: 26px;"
                viewBox="0 0 24 24"
                >
                <path
                    fill="currentColor"
                    d="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z"
                ></path>
                </svg>
                <svg
                class="fill-blue-500"
                style="width: 24px; height: 24px;"
                viewBox="0 0 24 24"
                >
                <path d="M2,21L23,12L2,3V10L17,12L2,14V21Z"></path>
                </svg>
            </span>
            </div>
            <!-- Comments content -->
            <div class="pt-6">
            <!-- Comment row -->
            <div class="media flex pb-4">
                <a class="mr-4" href="#">
                <img
                    class="rounded-full max-w-none w-12 h-12"
                    src="https://randomuser.me/api/portraits/men/82.jpg"
                />
                </a>
                <div class="media-body">
                <div>
                    <a class="inline-block text-base font-bold mr-2" href="#"
                    >Leslie Alexander</a
                    >
                    <span class="text-slate-500">25 minutes ago</span>
                </div>
                <p>Lorem ipsum dolor sit amet, consectetur.</p>
                <div class="mt-2 flex items-center">
                    <a class="inline-flex items-center py-2 mr-3" href="#">
                    <span class="mr-2">
                        <svg
                        class="fill-rose-600"
                        style="width: 22px; height: 22px;"
                        viewBox="0 0 24 24"
                        >
                        <path
                            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
                        ></path>
                        </svg>
                    </span>
                    <span class="text-base font-bold">12</span>
                    </a>
                    <button
                    class="py-2 px-4 font-medium hover:bg-slate-50 rounded-lg transition"
                    >
                    Repply
                    </button>
                </div>
                </div>
            </div>
            <!-- End comments row -->
            <!-- comments row -->
            <div class="media flex pb-4">
                <a class="inline-block mr-4" href="#">
                <img
                    class="rounded-full max-w-none w-12 h-12"
                    src="https://randomuser.me/api/portraits/women/76.jpg"
                />
                </a>
                <div class="media-body">
                <div>
                    <a class="inline-block text-base font-bold mr-2" href="#"
                    >Tina Mills</a
                    >
                    <span class="text-slate-500">3 minutes ago</span>
                </div>
                <p>Dolor sit ameteiusmod consectetur adipiscing elit.</p>
                <div class="mt-2 flex items-center">
                    <a class="inline-flex items-center py-2 mr-3" href="#">
                    <span class="mr-2">
                        <svg
                        class="fill-rose-600"
                        style="width: 22px; height: 22px;"
                        viewBox="0 0 24 24"
                        >
                        <path
                            d="M12.1 18.55L12 18.65L11.89 18.55C7.14 14.24 4 11.39 4 8.5C4 6.5 5.5 5 7.5 5C9.04 5 10.54 6 11.07 7.36H12.93C13.46 6 14.96 5 16.5 5C18.5 5 20 6.5 20 8.5C20 11.39 16.86 14.24 12.1 18.55M16.5 3C14.76 3 13.09 3.81 12 5.08C10.91 3.81 9.24 3 7.5 3C4.42 3 2 5.41 2 8.5C2 12.27 5.4 15.36 10.55 20.03L12 21.35L13.45 20.03C18.6 15.36 22 12.27 22 8.5C22 5.41 19.58 3 16.5 3Z"
                        ></path>
                        </svg>
                    </span>
                    <span class="text-base font-bold">0</span>
                    </a>
                    <button
                    class="py-2 px-4 font-medium hover:bg-slate-50 rounded-lg transition"
                    >
                    Repply
                    </button>
                </div>
                </div>
            </div>
            <!-- End comments row -->
            <!-- More comments -->
            <div class="w-full">
                <a
                href="#"
                class="py-3 px-4 w-full block bg-slate-100 text-center rounded-lg font-medium hover:bg-slate-200 transition ease-in-out delay-75"
                >Show more comments</a
                >
            </div>
            <!-- End More comments -->
            </div>
            <!-- End Comments content -->
        </article>

        <!-- Card-->
        <article
            class="mb-4 break-inside break-inside-avoid p-6 rounded-xl bg-white flex flex-col bg-clip-border max-w-md"
        >
            <div class="flex pb-6 items-center justify-between">
            <div class="flex">
                <a class="inline-block mr-4" href="#">
                <img
                    class="rounded-full max-w-none w-14 h-14"
                    src="https://randomuser.me/api/portraits/women/9.jpg"
                />
                </a>
                <div class="flex flex-col">
                <div class="flex items-center">
                    <a class="inline-block text-lg font-bold mr-2" href="#"
                    >Esther Howard</a
                    >
                    <span>
                    <svg class="fill-blue-500 w-5 h-5" viewBox="0 0 24 24">
                        <path
                        d="M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
                        ></path>
                    </svg>
                    </span>
                </div>
                <div class="text-slate-500">
                    January 22, 2021
                </div>
                </div>
            </div>
            </div>
            <h2 class="text-3xl font-extrabold">
            Web Design templates Selection
            </h2>
            <div class="py-4">
            <a class="flex" href="#">
                <img
                class="max-w-full rounded-lg"
                src="https://images.pexels.com/photos/3682153/pexels-photo-3682153.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
                />
            </a>
            </div>
            <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
            <div class="py-4">
            <a class="inline-flex items-center" href="#">
                <span class="mr-2">
                <svg
                    class="fill-rose-600"
                    style="width: 24px; height: 24px;"
                    viewBox="0 0 24 24"
                >
                    <path
                    d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
                    ></path>
                </svg>
                </span>
                <span class="text-lg font-bold">68</span>
            </a>
            </div>
            <div class="relative">
            <input
                class="pt-2 pb-2 pl-3 w-full h-11 bg-slate-100 rounded-lg placeholder:text-slate-600 font-medium pr-20"
                type="text"
                placeholder="Write a comment"
            />
            <span class="flex absolute right-3 top-2/4 -mt-3 items-center">
                <svg
                class="mr-2"
                style="width: 26px; height: 26px;"
                viewBox="0 0 24 24"
                >
                <path
                    fill="currentColor"
                    d="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z"
                ></path>
                </svg>
                <svg
                class="fill-blue-500"
                style="width: 24px; height: 24px;"
                viewBox="0 0 24 24"
                >
                <path d="M2,21L23,12L2,3V10L17,12L2,14V21Z"></path>
                </svg>
            </span>
            </div>
            <!-- Comments content -->
            <div class="pt-6">
            <!-- Comment row -->
            <div class="media flex pb-4">
                <a class="mr-4" href="#">
                <img
                    class="rounded-full max-w-none w-12 h-12"
                    src="https://randomuser.me/api/portraits/men/83.jpg"
                />
                </a>
                <div class="media-body">
                <div>
                    <a class="inline-block text-base font-bold mr-2" href="#"
                    >Ronald Richards</a
                    >
                    <span class="text-slate-500">25 minutes ago</span>
                </div>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do
                    eiusmod 😀😀😀
                </p>
                <div class="mt-2 flex items-center">
                    <a class="inline-flex items-center py-2 mr-3" href="#">
                    <span class="mr-2">
                        <svg
                        class="fill-rose-600"
                        style="width: 22px; height: 22px;"
                        viewBox="0 0 24 24"
                        >
                        <path
                            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
                        ></path>
                        </svg>
                    </span>
                    <span class="text-base font-bold">2</span>
                    </a>
                    <button
                    class="py-2 px-4 font-medium hover:bg-slate-50 rounded-lg transition"
                    >
                    Repply
                    </button>
                </div>
                </div>
            </div>
            <!-- End comments row -->
            <!-- comments row -->
            <div class="media flex pb-4">
                <a class="inline-block mr-4" href="#">
                <img
                    class="rounded-full max-w-none w-12 h-12"
                    src="https://randomuser.me/api/portraits/women/74.jpg"
                />
                </a>
                <div class="media-body">
                <div>
                    <a class="inline-block text-base font-bold mr-2" href="#"
                    >Natalia Jímenez</a
                    >
                    <span class="text-slate-500">3 minutes ago</span>
                </div>
                <p>Dolor sit ameteiusmod consectetur adipiscing elit.</p>
                <div class="mt-2 flex items-center">
                    <a class="inline-flex items-center py-2 mr-3" href="#">
                    <span class="mr-2">
                        <svg
                        class="fill-rose-600"
                        style="width: 22px; height: 22px;"
                        viewBox="0 0 24 24"
                        >
                        <path
                            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
                        ></path>
                        </svg>
                    </span>
                    <span class="text-base font-bold">2</span>
                    </a>
                    <button
                    class="py-2 px-4 font-medium hover:bg-slate-50 rounded-lg transition"
                    >
                    Repply
                    </button>
                </div>
                </div>
            </div>
            <!-- End comments row -->
            <!-- More comments -->
            <div class="w-full">
                <a
                href="#"
                class="py-3 px-4 w-full block bg-slate-100 text-center rounded-lg font-medium hover:bg-slate-200 transition ease-in-out delay-75"
                >Show more comments</a
                >
            </div>
            <!-- End More comments -->
            </div>
            <!-- End Comments content -->
        </article>
        <!-- Close Card -->

        <!-- Card-->
        <article
            class="mb-4 break-inside break-inside-avoid p-6 rounded-xl bg-white flex flex-col bg-clip-border max-w-md"
        >
            <div class="flex pb-6 items-center justify-between">
            <div class="flex">
                <a class="inline-block mr-4" href="#">
                <img
                    class="rounded-full max-w-none w-14 h-14"
                    src="https://randomuser.me/api/portraits/men/33.jpg"
                />
                </a>
                <div class="flex flex-col">
                <div class="flex items-center">
                    <a class="inline-block text-lg font-bold mr-2" href="#"
                    >Leonard Isom</a
                    >
                </div>
                <div class="text-slate-500">
                    Medical Assistant
                </div>
                </div>
            </div>
            </div>
            <div class="py-4">
            <div class="flex justify-between gap-1 mb-1">
                <a class="flex" href="#">
                <img
                    class="max-w-full rounded-l-lg"
                    src="https://images.pexels.com/photos/2128028/pexels-photo-2128028.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
                />
                </a>
                <a class="flex" href="#">
                <img
                    class="max-w-full rounded-r-lg"
                    src="https://images.pexels.com/photos/6145852/pexels-photo-6145852.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
                />
                </a>
            </div>
            </div>
            <h2 class="text-3xl font-extrabold">
            Web Design templates Selection
            </h2>
            <div class="py-4">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
            </div>
            <div class="py-4">
            <a class="inline-flex items-center" href="#">
                <span class="mr-2">
                <svg
                    class="fill-rose-600"
                    style="width: 24px; height: 24px;"
                    viewBox="0 0 24 24"
                >
                    <path
                    d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
                    ></path>
                </svg>
                </span>
                <span class="text-lg font-bold">15</span>
            </a>
            </div>
            <div class="relative">
            <input
                class="pt-2 pb-2 pl-3 w-full h-11 bg-slate-100 rounded-lg placeholder:text-slate-600 font-medium pr-20"
                type="text"
                placeholder="Write a comment"
            />
            <span class="flex absolute right-3 top-2/4 -mt-3 items-center">
                <svg
                class="mr-2"
                style="width: 26px; height: 26px;"
                viewBox="0 0 24 24"
                >
                <path
                    fill="currentColor"
                    d="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z"
                ></path>
                </svg>
                <svg
                class="fill-blue-500"
                style="width: 24px; height: 24px;"
                viewBox="0 0 24 24"
                >
                <path d="M2,21L23,12L2,3V10L17,12L2,14V21Z"></path>
                </svg>
            </span>
            </div>
        </article>
        <!-- End Card -->

        <!-- Card-->
        <article
            class="mb-4 break-inside break-inside-avoid p-6 rounded-xl bg-white flex flex-col bg-clip-border max-w-md"
        >
            <div class="flex pb-6 items-center justify-between">
            <div class="flex">
                <a class="inline-block mr-4" href="#">
                <img
                    class="rounded-full max-w-none w-14 h-14"
                    src="https://randomuser.me/api/portraits/men/9.jpg"
                />
                </a>
                <div class="flex flex-col">
                <div class="flex items-center">
                    <a class="inline-block text-lg font-bold mr-2" href="#"
                    >Eduardo</a
                    >
                    <span class="text-slate-500">25 minutes ago</span>
                </div>
                <div class="text-slate-500">
                    General Electric
                </div>
                </div>
            </div>
            </div>
            <h2 class="text-3xl font-extrabold">
            Web Design templates Selection
            </h2>
            <div class="py-4">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
            </div>
            <div class="py-4">
            <a class="inline-flex items-center" href="#">
                <span class="mr-2">
                <svg
                    class="fill-rose-600"
                    style="width: 24px; height: 24px;"
                    viewBox="0 0 24 24"
                >
                    <path
                    d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
                    ></path>
                </svg>
                </span>
                <span class="text-lg font-bold">34</span>
            </a>
            </div>
            <div class="relative">
            <input
                class="pt-2 pb-2 pl-3 w-full h-11 bg-slate-100 rounded-lg placeholder:text-slate-600 font-medium pr-20"
                type="text"
                placeholder="Write a comment"
            />
            <span class="flex absolute right-3 top-2/4 -mt-3 items-center">
                <svg
                class="mr-2"
                style="width: 26px; height: 26px;"
                viewBox="0 0 24 24"
                >
                <path
                    fill="currentColor"
                    d="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z"
                ></path>
                </svg>
                <svg
                class="fill-blue-500"
                style="width: 24px; height: 24px;"
                viewBox="0 0 24 24"
                >
                <path d="M2,21L23,12L2,3V10L17,12L2,14V21Z"></path>
                </svg>
            </span>
            </div>
            <!-- Comments content -->
            <div class="pt-6">
            <!-- Comment row -->
            <div class="media flex pb-4">
                <a class="mr-4" href="#">
                <img
                    class="rounded-full max-w-none w-12 h-12"
                    src="https://randomuser.me/api/portraits/men/54.jpg"
                />
                </a>
                <div class="media-body">
                <div>
                    <a class="inline-block text-base font-bold mr-2" href="#"
                    >Shawn</a
                    >
                    <span class="text-slate-500">2 days ago</span>
                </div>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do
                    eiusmod.
                </p>
                <div class="mt-2 flex items-center">
                    <a class="inline-flex items-center py-2 mr-3" href="#">
                    <span class="mr-2">
                        <svg
                        class="fill-rose-600"
                        style="width: 22px; height: 22px;"
                        viewBox="0 0 24 24"
                        >
                        <path
                            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
                        ></path>
                        </svg>
                    </span>
                    <span class="text-base font-bold">2</span>
                    </a>
                    <button
                    class="py-2 px-4 font-medium hover:bg-slate-50 rounded-lg transition"
                    >
                    Repply
                    </button>
                </div>
                </div>
            </div>
            <!-- End comments row -->
            <!-- comments row -->
            <div class="media flex pb-4">
                <a class="inline-block mr-4" href="#">
                <img
                    class="rounded-full max-w-none w-12 h-12"
                    src="https://randomuser.me/api/portraits/women/54.jpg"
                />
                </a>
                <div class="media-body">
                <div>
                    <a class="inline-block text-base font-bold mr-2" href="#"
                    >Dianne Russell</a
                    >
                    <span class="text-slate-500">3 minutes ago</span>
                </div>
                <p>
                    Dolor sit ameteiusmod Dolor sit ameteiusmod
                    😍😍✌🤪consectetur adipiscing elitconsectetur adipiscing
                    elit.
                </p>
                <div class="mt-2 flex items-center">
                    <a class="inline-flex items-center py-2 mr-3" href="#">
                    <span class="mr-2">
                        <svg
                        class="fill-rose-600"
                        style="width: 22px; height: 22px;"
                        viewBox="0 0 24 24"
                        >
                        <path
                            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
                        ></path>
                        </svg>
                    </span>
                    <span class="text-base font-bold">2</span>
                    </a>
                    <button
                    class="py-2 px-4 font-medium hover:bg-slate-50 rounded-lg transition"
                    >
                    Repply
                    </button>
                </div>
                </div>
            </div>
            <!-- End comments row -->
            <!-- More comments -->
            <div class="w-full">
                <a
                href="#"
                class="py-3 px-4 w-full block bg-slate-100 text-center rounded-lg font-medium hover:bg-slate-200 transition ease-in-out delay-75"
                >Show more comments</a
                >
            </div>
            <!-- End More comments -->
            </div>
            <!-- End Comments content -->
        </article>
        <!-- Close card -->

        <!-- Card-->
        <article
            class="mb-4 break-inside break-inside-avoid p-6 rounded-xl bg-white flex flex-col bg-clip-border max-w-md"
        >
            <div class="flex pb-6 items-center justify-between">
            <div class="flex">
                <a class="inline-block mr-4" href="#">
                <img
                    class="rounded-full max-w-none w-14 h-14"
                    src="https://randomuser.me/api/portraits/women/43.jpg"
                />
                </a>
                <div class="flex flex-col">
                <div class="flex items-center">
                    <a class="inline-block text-lg font-bold mr-2" href="#"
                    >Anna Bernal</a
                    >
                    <span class="text-slate-500">Johnson & Johnson</span>
                </div>
                <div class="text-slate-500">
                    General Electric
                </div>
                </div>
            </div>
            </div>
            <div class="my-4 flex gap-1">
            <div class="flex flex-col gap-1 flex-1">
                <a class="flex h-2/4" href="#">
                <img
                    class="max-w-full rounded-tl-lg object-fill"
                    src="https://images.pexels.com/photos/327331/pexels-photo-327331.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
                />
                </a>
                <a class="flex h-2/4" href="#">
                <img
                    class="max-w-full rounded-bl-lg object-fill"
                    src="https://images.pexels.com/photos/92866/pexels-photo-92866.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
                />
                </a>
            </div>
            <div class="flex flex-col gap-1 flex-1">
                <a class="flex h-full" href="#">
                <img
                    class="max-w-full rounded-tr-lg rounded-br-lg object-contain"
                    src="https://images.pexels.com/photos/247931/pexels-photo-247931.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
                />
                </a>
            </div>
            </div>
            <h2 class="text-3xl font-extrabold">
            Web Design templates Selection
            </h2>
            <div class="py-4">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
            </div>
            <div class="py-4">
            <a class="inline-flex items-center" href="#">
                <span class="mr-2">
                <svg
                    class="fill-rose-600"
                    style="width: 24px; height: 24px;"
                    viewBox="0 0 24 24"
                >
                    <path
                    d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
                    ></path>
                </svg>
                </span>
                <span class="text-lg font-bold">34</span>
            </a>
            </div>
            <div class="relative">
            <input
                class="pt-2 pb-2 pl-3 w-full h-11 bg-slate-100 rounded-lg placeholder:text-slate-600 font-medium pr-20"
                type="text"
                placeholder="Write a comment"
            />
            <span class="flex absolute right-3 top-2/4 -mt-3 items-center">
                <svg
                class="mr-2"
                style="width: 26px; height: 26px;"
                viewBox="0 0 24 24"
                >
                <path
                    fill="currentColor"
                    d="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z"
                ></path>
                </svg>
                <svg
                class="fill-blue-500"
                style="width: 24px; height: 24px;"
                viewBox="0 0 24 24"
                >
                <path d="M2,21L23,12L2,3V10L17,12L2,14V21Z"></path>
                </svg>
            </span>
            </div>
            <!-- Comments content -->
            <div class="pt-6">
            <!-- Comment row -->
            <div class="media flex pb-4">
                <a class="mr-4" href="#">
                <img
                    class="rounded-full max-w-none w-12 h-12"
                    src="https://randomuser.me/api/portraits/women/23.jpg"
                />
                </a>
                <div class="media-body">
                <div>
                    <a class="inline-block text-base font-bold mr-2" href="#"
                    >Jerome Bell</a
                    >
                    <span class="text-slate-500">2 days ago</span>
                </div>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do
                    eiusmod.
                </p>
                <div class="mt-2 flex items-center">
                    <a class="inline-flex items-center py-2 mr-3" href="#">
                    <span class="mr-2">
                        <svg
                        class="fill-rose-600"
                        style="width: 22px; height: 22px;"
                        viewBox="0 0 24 24"
                        >
                        <path
                            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
                        ></path>
                        </svg>
                    </span>
                    <span class="text-base font-bold">2</span>
                    </a>
                    <button
                    class="py-2 px-4 font-medium hover:bg-slate-50 rounded-lg transition"
                    >
                    Repply
                    </button>
                </div>
                </div>
            </div>
            <!-- End comments row -->
            <!-- comments row -->
            <div class="media flex pb-4">
                <a class="inline-block mr-4" href="#">
                <img
                    class="rounded-full max-w-none w-12 h-12"
                    src="https://randomuser.me/api/portraits/women/59.jpg"
                />
                </a>
                <div class="media-body">
                <div>
                    <a class="inline-block text-base font-bold mr-2" href="#"
                    >Eleanor Pena</a
                    >
                    <span class="text-slate-500">3 minutes ago</span>
                </div>
                <p>
                    Dolor sit ameteiusmod Dolor sit ameteiusmod
                    😍😍✌🤪consectetur adipiscing elitconsectetur adipiscing
                    elit.
                </p>
                <div class="mt-2 flex items-center">
                    <a class="inline-flex items-center py-2 mr-3" href="#">
                    <span class="mr-2">
                        <svg
                        class="fill-rose-600"
                        style="width: 22px; height: 22px;"
                        viewBox="0 0 24 24"
                        >
                        <path
                            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
                        ></path>
                        </svg>
                    </span>
                    <span class="text-base font-bold">2</span>
                    </a>
                    <button
                    class="py-2 px-4 font-medium hover:bg-slate-50 rounded-lg transition"
                    >
                    Repply
                    </button>
                </div>
                <!-- Repply content -->
                <div class="mt-4">
                    <!-- Comment row -->
                    <div class="media flex pb-4">
                    <a class="mr-4" href="#">
                        <img
                        class="rounded-full max-w-none w-10 h-10"
                        src="https://randomuser.me/api/portraits/men/23.jpg"
                        />
                    </a>
                    <div class="media-body">
                        <div>
                        <a
                            class="inline-block text-base font-bold mr-2"
                            href="#"
                            >Joseph Diaz</a
                        >
                        <span class="text-slate-500">5 minutes ago</span>
                        </div>
                        <p>Dolor sit ameteiusmod consectetur.</p>
                        <div class="mt-2 flex items-center">
                        <a class="inline-flex items-center py-2 mr-3" href="#">
                            <span class="mr-2">
                            <svg
                                class="fill-rose-600"
                                style="width: 22px; height: 22px;"
                                viewBox="0 0 24 24"
                            >
                                <path
                                d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
                                ></path>
                            </svg>
                            </span>
                            <span class="text-base font-bold">8</span>
                        </a>
                        <button
                            class="py-2 px-4 font-medium hover:bg-slate-50 rounded-lg transition"
                        >
                            Repply
                        </button>
                        </div>
                    </div>
                    </div>
                    <!-- End comments row -->
                </div>
                <!-- End repply content -->
                </div>
            </div>
            <!-- End comments row -->
            <!-- More comments -->
            <div class="w-full">
                <a
                href="#"
                class="py-3 px-4 w-full block bg-slate-100 text-center rounded-lg font-medium hover:bg-slate-200 transition ease-in-out delay-75"
                >Show more comments</a
                >
            </div>
            <!-- End More comments -->
            </div>
            <!-- End Comments content -->
        </article>
        <!-- Close card -->

        <!-- Card-->
        <article
            class="mb-4 break-inside break-inside-avoid p-6 rounded-xl bg-white flex flex-col bg-clip-border max-w-md"
        >
            <div class="flex pb-6 items-center justify-between">
            <div class="flex">
                <a class="inline-block mr-4" href="#">
                <img
                    class="rounded-full max-w-none w-14 h-14"
                    src="https://randomuser.me/api/portraits/men/32.jpg"
                />
                </a>
                <div class="flex flex-col">
                <div class="flex items-center">
                    <a class="inline-block text-lg font-bold mr-2" href="#"
                    >Savannah Nguyen</a
                    >
                </div>
                <div class="text-slate-500">
                    January 22, 2021
                </div>
                </div>
            </div>
            </div>
            <h2 class="text-3xl font-extrabold">
            Web Design templates Selection
            </h2>
            <div class="py-4">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
            </div>
            <div class="py-4">
            <a class="inline-flex items-center" href="#">
                <span class="mr-2">
                <svg
                    class="fill-rose-600"
                    style="width: 24px; height: 24px;"
                    viewBox="0 0 24 24"
                >
                    <path
                    d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
                    ></path>
                </svg>
                </span>
                <span class="text-lg font-bold">15</span>
            </a>
            </div>
            <div class="relative">
            <input
                class="pt-2 pb-2 pl-3 w-full h-11 bg-slate-100 rounded-lg placeholder:text-slate-600 font-medium pr-20"
                type="text"
                placeholder="Write a comment"
            />
            <span class="flex absolute right-3 top-2/4 -mt-3 items-center">
                <svg
                class="mr-2"
                style="width: 26px; height: 26px;"
                viewBox="0 0 24 24"
                >
                <path
                    fill="currentColor"
                    d="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z"
                ></path>
                </svg>
                <svg
                class="fill-blue-500"
                style="width: 24px; height: 24px;"
                viewBox="0 0 24 24"
                >
                <path d="M2,21L23,12L2,3V10L17,12L2,14V21Z"></path>
                </svg>
            </span>
            </div>
        </article>
        <!-- End Card -->

        <!-- Card-->
        <article
            class="mb-4 break-inside break-inside-avoid rounded-xl bg-white flex flex-col bg-clip-border max-w-md"
        >
            <div class="flex p-6 items-center justify-between">
            <div class="flex">
                <a class="inline-block mr-4" href="#">
                <img
                    class="rounded-full max-w-none w-14 h-14"
                    src="https://randomuser.me/api/portraits/women/47.jpg"
                />
                </a>
                <div class="flex flex-col">
                <div class="flex items-center">
                    <a class="inline-block text-lg font-bold mr-2" href="#"
                    >Annette Black</a
                    >
                    <span class="text-slate-500">3 minutes ago</span>
                </div>
                <div class="text-slate-500">
                    Medical Assistant
                </div>
                </div>
            </div>
            </div>
            <div class="p-6 bg-violet-500">
            <h2 class="text-3xl font-extrabold text-white">
                Web Design templates Selection
            </h2>
            </div>
            <div class="p-6">
            <div class="flex justify-between items-center">
                <a class="inline-flex items-center" href="#">
                <span class="-m-1 rounded-full border-2 border-white">
                    <img
                    class="w-6"
                    src="https://cdn.iconscout.com/icon/free/png-256/like-2387659-1991059.png"
                    />
                </span>
                <span class="-m-1 rounded-full border-2 border-white">
                    <img
                    class="w-6"
                    src="https://cdn.iconscout.com/icon/free/png-256/love-2387666-1991064.png"
                    />
                </span>
                <span class="-m-1 rounded-full border-2 border-white">
                    <img
                    class="w-6"
                    src="https://cdn.iconscout.com/icon/free/png-256/haha-2387660-1991060.png"
                    />
                </span>
                <span class="text-lg font-bold ml-3">237</span>
                </a>
                <a class="ml-auto" href="#">23 comentarios</a>
            </div>
            <div class="mt-6 mb-6 h-px bg-slate-200"></div>
            <div class="flex items-center justify-between mb-6">
                <button
                class="py-2 px-4 font-medium hover:bg-slate-50 rounded-lg transition"
                >
                Me gusta
                </button>
                <button
                class="py-2 px-4 font-medium hover:bg-slate-50 rounded-lg transition"
                >
                Comentar
                </button>
                <button
                class="py-2 px-4 font-medium hover:bg-slate-50 rounded-lg transition"
                >
                Compartir
                </button>
            </div>
            <div class="relative">
                <input
                class="pt-2 pb-2 pl-3 w-full h-11 bg-slate-100 rounded-lg placeholder:text-slate-600 font-medium pr-20"
                type="text"
                placeholder="Write a comment"
                />
                <span class="flex absolute right-3 top-2/4 -mt-3 items-center">
                <svg
                    class="mr-2"
                    style="width: 26px; height: 26px;"
                    viewBox="0 0 24 24"
                >
                    <path
                    fill="currentColor"
                    d="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z"
                    ></path>
                </svg>
                <svg
                    class="fill-blue-500"
                    style="width: 24px; height: 24px;"
                    viewBox="0 0 24 24"
                >
                    <path d="M2,21L23,12L2,3V10L17,12L2,14V21Z"></path>
                </svg>
                </span>
            </div>
            </div>
        </article>
        <!-- End Card -->

        <!-- Card-->
        <article
            class="mb-4 break-inside break-inside-avoid rounded-xl bg-white flex flex-col bg-clip-border max-w-md"
        >
            <div class="flex p-6 items-center justify-between">
            <div class="flex">
                <a class="inline-block mr-4" href="#">
                <img
                    class="rounded-full max-w-none w-14 h-14"
                    src="https://randomuser.me/api/portraits/women/33.jpg"
                />
                </a>
                <div class="flex flex-col">
                <div class="flex items-center">
                    <a class="inline-block text-lg font-bold mr-2" href="#"
                    >Cameron Williamson</a
                    >
                    <span>
                    <svg class="fill-blue-500 w-5 h-5" viewBox="0 0 24 24">
                        <path
                        d="M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z"
                        ></path>
                    </svg>
                    </span>
                </div>
                <div class="text-slate-500">
                    Software Development Manager
                </div>
                </div>
            </div>
            </div>
            <p class="pr-6 pl-6 pb-6">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </p>
            <div class="p-6 bg-gradient-to-r from-cyan-500 to-blue-500">
            <h2 class="text-3xl text-white font-extrabold">
                Lorem ipsum dolor sit amet consectetur adipiscing elit sed do
                eiusmod.
            </h2>
            </div>
            <div class="p-6">
            <a class="inline-flex items-center" href="#">
                <span class="mr-2">
                <svg
                    class="fill-rose-600"
                    style="width: 24px; height: 24px;"
                    viewBox="0 0 24 24"
                >
                    <path
                    d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
                    ></path>
                </svg>
                </span>
                <span class="text-lg font-bold">68</span>
            </a>
            </div>
            <div class="px-6">
            <div class="relative">
                <input
                class="pt-2 pb-2 pl-3 w-full h-11 bg-slate-100 rounded-lg placeholder:text-slate-600 font-medium pr-20"
                type="text"
                placeholder="Write a comment"
                />
                <span class="flex absolute right-3 top-2/4 -mt-3 items-center">
                <svg
                    class="mr-2"
                    style="width: 26px; height: 26px;"
                    viewBox="0 0 24 24"
                >
                    <path
                    fill="currentColor"
                    d="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z"
                    ></path>
                </svg>
                <svg
                    class="fill-blue-500"
                    style="width: 24px; height: 24px;"
                    viewBox="0 0 24 24"
                >
                    <path d="M2,21L23,12L2,3V10L17,12L2,14V21Z"></path>
                </svg>
                </span>
            </div>
            </div>
            <!-- Comments content -->
            <div class="p-6">
            <!-- Comment row -->
            <div class="media flex pb-4">
                <a class="mr-4" href="#">
                <img
                    class="rounded-full max-w-none w-12 h-12"
                    src="https://randomuser.me/api/portraits/women/83.jpg"
                />
                </a>
                <div class="media-body">
                <div>
                    <a class="inline-block text-base font-bold mr-2" href="#"
                    >Kristin Watson</a
                    >
                    <span class="text-slate-500">25 minutes ago</span>
                </div>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit seddo
                </p>
                <div class="mt-2 flex items-center">
                    <a class="inline-flex items-center py-2 mr-3" href="#">
                    <span class="mr-2">
                        <svg
                        class="fill-rose-600"
                        style="width: 22px; height: 22px;"
                        viewBox="0 0 24 24"
                        >
                        <path
                            d="M12.1 18.55L12 18.65L11.89 18.55C7.14 14.24 4 11.39 4 8.5C4 6.5 5.5 5 7.5 5C9.04 5 10.54 6 11.07 7.36H12.93C13.46 6 14.96 5 16.5 5C18.5 5 20 6.5 20 8.5C20 11.39 16.86 14.24 12.1 18.55M16.5 3C14.76 3 13.09 3.81 12 5.08C10.91 3.81 9.24 3 7.5 3C4.42 3 2 5.41 2 8.5C2 12.27 5.4 15.36 10.55 20.03L12 21.35L13.45 20.03C18.6 15.36 22 12.27 22 8.5C22 5.41 19.58 3 16.5 3Z"
                        ></path>
                        </svg>
                    </span>
                    <span class="text-base font-bold">0</span>
                    </a>
                    <button
                    class="py-2 px-4 font-medium hover:bg-slate-50 rounded-lg transition"
                    >
                    Repply
                    </button>
                </div>
                </div>
            </div>
            <!-- End comments row -->
            <!-- comments row -->
            <div class="media flex pb-4">
                <a class="inline-block mr-4" href="#">
                <img
                    class="rounded-full max-w-none w-12 h-12"
                    src="https://randomuser.me/api/portraits/women/74.jpg"
                />
                </a>
                <div class="media-body">
                <div>
                    <a class="inline-block text-base font-bold mr-2" href="#"
                    >Melvin D. Goodman</a
                    >
                    <span class="text-slate-500">3 minutes ago</span>
                </div>
                <p>Dolor sit ameteiusmod consectetur adipiscing elit.</p>
                <div class="mt-2 flex items-center">
                    <a class="inline-flex items-center py-2 mr-3" href="#">
                    <span class="mr-2">
                        <svg
                        class="fill-rose-600"
                        style="width: 22px; height: 22px;"
                        viewBox="0 0 24 24"
                        >
                        <path
                            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
                        ></path>
                        </svg>
                    </span>
                    <span class="text-base font-bold">23</span>
                    </a>
                    <button
                    class="py-2 px-4 font-medium hover:bg-slate-50 rounded-lg transition"
                    >
                    Repply
                    </button>
                </div>
                </div>
            </div>
            <!-- End comments row -->
            <!-- comments row -->
            <div class="media flex pb-4">
                <a class="inline-block mr-4" href="#">
                <img
                    class="rounded-full max-w-none w-12 h-12"
                    src="https://randomuser.me/api/portraits/men/7.jpg"
                />
                </a>
                <div class="media-body">
                <div>
                    <a class="inline-block text-base font-bold mr-2" href="#"
                    >Erik Moore</a
                    >
                    <span class="text-slate-500">3 minutes ago</span>
                </div>
                <p>Dolor sit ameteiusmod consectetur adipiscing elit.</p>
                <div class="py-4">
                    <a class="flex" href="#">
                    <img
                        class="max-w-full rounded-lg"
                        src="https://images.pexels.com/photos/61381/pexels-photo-61381.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
                    />
                    </a>
                </div>
                <div class="mt-2 flex items-center">
                    <a class="inline-flex items-center py-2 mr-3" href="#">
                    <span class="mr-2">
                        <svg
                        class="fill-rose-600"
                        style="width: 22px; height: 22px;"
                        viewBox="0 0 24 24"
                        >
                        <path
                            d="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
                        ></path>
                        </svg>
                    </span>
                    <span class="text-base font-bold">23</span>
                    </a>
                    <button
                    class="py-2 px-4 font-medium hover:bg-slate-50 rounded-lg transition"
                    >
                    Repply
                    </button>
                </div>
                </div>
            </div>
            <!-- End comments row -->
            <!-- More comments -->
            <div class="w-full">
                <a
                href="#"
                class="py-3 px-4 w-full block bg-slate-100 text-center rounded-lg font-medium hover:bg-slate-200 transition ease-in-out delay-75"
                >Show more comments</a
                >
            </div>
            <!-- End More comments -->
            </div>
            <!-- End Comments content -->
        </article>
        <!-- Close Card -->

        <!-- Card-->
        <article
            class="mb-4 break-inside break-inside-avoid rounded-xl bg-white flex flex-col bg-clip-border max-w-md"
        >
            <div class="flex p-6 items-center justify-between">
            <div class="flex">
                <a class="inline-block mr-4" href="#">
                <img
                    class="rounded-full max-w-none w-14 h-14"
                    src="https://randomuser.me/api/portraits/women/67.jpg"
                />
                </a>
                <div class="flex flex-col">
                <div class="flex items-center">
                    <a class="inline-block text-lg font-bold mr-2" href="#"
                    >Marylin B. Bechtol</a
                    >
                    <span class="text-slate-500">3 minutes ago</span>
                </div>
                <div class="text-slate-500">
                    Marketing Coordinator
                </div>
                </div>
            </div>
            </div>
            <p class="pr-6 pl-6 pb-6">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit sed do
            eiusmodelit sed do eiusmodelit sed do eiusmodelit sed do eiusmod
            <a href="#" class="font-medium text-blue-700">#ui</a>
            <a href="#" class="font-medium text-blue-700">#uxui</a>
            <a href="#" class="font-medium text-blue-700">#userinterface</a>
            <a href="#" class="font-medium text-blue-700">#webdeveloper</a>
            <a href="#" class="font-medium text-blue-700">#card</a>
            </p>
            <div class="p-6 bg-yellow-500">
            <h2 class="text-3xl font-extrabold text-black">
                Web Design templates Selection
            </h2>
            </div>
            <div class="p-6">
            <div class="flex justify-between items-center">
                <a class="inline-flex items-center" href="#">
                <span class="-m-1 rounded-full border-2 border-white">
                    <img
                    class="w-6"
                    src="https://cdn.iconscout.com/icon/free/png-256/like-2387659-1991059.png"
                    />
                </span>
                <span class="-m-1 rounded-full border-2 border-white">
                    <img
                    class="w-6"
                    src="https://cdn.iconscout.com/icon/free/png-256/angry-2387661-1991061.png"
                    />
                </span>
                <span class="-m-1 rounded-full border-2 border-white">
                    <img
                    class="w-6"
                    src="https://cdn.iconscout.com/icon/free/png-256/wow-2387663-1991062.png"
                    />
                </span>
                <span class="text-lg font-bold ml-3">237</span>
                </a>
                <a class="ml-auto" href="#">23 comentarios</a>
            </div>
            <div class="mt-6 mb-6 h-px bg-slate-200"></div>
            <div class="flex items-center justify-between mb-6">
                <button
                class="py-2 px-4 font-medium hover:bg-slate-50 rounded-lg transition"
                >
                Me gusta
                </button>
                <button
                class="py-2 px-4 font-medium hover:bg-slate-50 rounded-lg transition"
                >
                Comentar
                </button>
                <button
                class="py-2 px-4 font-medium hover:bg-slate-50 rounded-lg transition"
                >
                Compartir
                </button>
            </div>
            <div class="relative">
                <input
                class="pt-2 pb-2 pl-3 w-full h-11 bg-slate-100 rounded-lg placeholder:text-slate-600 font-medium pr-20"
                type="text"
                placeholder="Write a comment"
                />
                <span class="flex absolute right-3 top-2/4 -mt-3 items-center">
                <svg
                    class="mr-2"
                    style="width: 26px; height: 26px;"
                    viewBox="0 0 24 24"
                >
                    <path
                    fill="currentColor"
                    d="M20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,9.5C10,10.3 9.3,11 8.5,11C7.7,11 7,10.3 7,9.5C7,8.7 7.7,8 8.5,8C9.3,8 10,8.7 10,9.5M17,9.5C17,10.3 16.3,11 15.5,11C14.7,11 14,10.3 14,9.5C14,8.7 14.7,8 15.5,8C16.3,8 17,8.7 17,9.5M12,17.23C10.25,17.23 8.71,16.5 7.81,15.42L9.23,14C9.68,14.72 10.75,15.23 12,15.23C13.25,15.23 14.32,14.72 14.77,14L16.19,15.42C15.29,16.5 13.75,17.23 12,17.23Z"
                    ></path>
                </svg>
                <svg
                    class="fill-blue-500"
                    style="width: 24px; height: 24px;"
                    viewBox="0 0 24 24"
                >
                    <path d="M2,21L23,12L2,3V10L17,12L2,14V21Z"></path>
                </svg>
                </span>
            </div>
            </div>
        </article>
        <!-- End Card -->
        </div>
    </div>
    <!-- End Wrapper-->

    <!-- Footer-->
    <footer class="w-full flex justify-center flex-col py-4 text-center mt-14">
        <p class="mb-1">
        Built by
        <a class="font-medium underline" href="https://codepen.io/frankuxui">
            Frank Esteban</a
        >
        </p>
        <p class="mb-3">
        Contact me on the different platforms and social networks
        </p>
        <div class="flex items-center justify-center">
        <a
            class="w-12 h-12 flex justify-center items-center rounded-full hover:bg-slate-300 transition"
            href="https://codepen.io/frankuxui"
            target="__blank"
        >
            <svg
            xmlns="http://www.w3.org/2000/svg"
            width="25"
            height="25"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            version="1.1"
            viewBox="0 0 24 24"
            >
            <path
                fill="currentColor"
                d="M8.21 12L6.88 12.89V11.11L8.21 12M11.47 9.82V7.34L7.31 10.12L9.16 11.36L11.47 9.82M16.7 10.12L12.53 7.34V9.82L14.84 11.36L16.7 10.12M7.31 13.88L11.47 16.66V14.18L9.16 12.64L7.31 13.88M12.53 14.18V16.66L16.7 13.88L14.84 12.64L12.53 14.18M12 10.74L10.12 12L12 13.26L13.88 12L12 10.74M22 12C22 17.5 17.5 22 12 22C6.5 22 2 17.5 2 12C2 6.5 6.5 2 12 2C17.5 2 22 6.5 22 12M18.18 10.12C18.18 10.09 18.18 10.07 18.18 10.05L18.17 10L18.17 10L18.16 9.95C18.15 9.94 18.15 9.93 18.14 9.91L18.13 9.89L18.11 9.85L18.1 9.83L18.08 9.8L18.06 9.77L18.03 9.74L18 9.72L18 9.7L17.96 9.68L17.95 9.67L12.3 5.91C12.12 5.79 11.89 5.79 11.71 5.91L6.05 9.67L6.05 9.68L6 9.7C6 9.71 6 9.72 6 9.72L5.97 9.74L5.94 9.77L5.93 9.8L5.9 9.83L5.89 9.85L5.87 9.89L5.86 9.91L5.84 9.95L5.84 10L5.83 10L5.82 10.05C5.82 10.07 5.82 10.09 5.82 10.12V13.88C5.82 13.91 5.82 13.93 5.82 13.95L5.83 14L5.84 14L5.84 14.05C5.85 14.06 5.85 14.07 5.86 14.09L5.87 14.11L5.89 14.15L5.9 14.17L5.92 14.2L5.94 14.23C5.95 14.24 5.96 14.25 5.97 14.26L6 14.28L6 14.3L6.04 14.32L6.05 14.33L11.71 18.1C11.79 18.16 11.9 18.18 12 18.18C12.1 18.18 12.21 18.15 12.3 18.1L17.95 14.33L17.96 14.32L18 14.3L18 14.28L18.03 14.26L18.06 14.23L18.08 14.2L18.1 14.17L18.11 14.15L18.13 14.11L18.14 14.09L18.16 14.05L18.16 14L18.17 14L18.18 13.95C18.18 13.93 18.18 13.91 18.18 13.88V10.12M17.12 12.89V11.11L15.79 12L17.12 12.89Z"
            ></path>
            </svg>
        </a>
        <a
            class="w-12 h-12 flex justify-center items-center rounded-full hover:bg-slate-300 transition"
            href="https://codesandbox.io/u/frankuxui"
            target="__blank"
        >
            <svg
            xmlns="http://www.w3.org/2000/svg"
            width="25"
            height="25"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            version="1.1"
            viewBox="0 0 24 24"
            >
            <path
                fill="currentColor"
                d="M2 6l10.455-6L22.91 6 23 17.95 12.455 24 2 18V6zm2.088 2.481v4.757l3.345 1.86v3.516l3.972 2.296v-8.272L4.088 8.481zm16.739 0l-7.317 4.157v8.272l3.972-2.296V15.1l3.345-1.861V8.48zM5.134 6.601l7.303 4.144 7.32-4.18-3.871-2.197-3.41 1.945-3.43-1.968L5.133 6.6z"
            ></path>
            </svg>
        </a>
        <a
            class="w-12 h-12 flex justify-center items-center rounded-full hover:bg-slate-300 transition"
            href="https://github.com/frankuxui"
            target="__blank"
        >
            <svg
            xmlns="http://www.w3.org/2000/svg"
            width="25"
            height="25"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            version="1.1"
            viewBox="0 0 24 24"
            >
            <path
                fill="currentColor"
                d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z"
            ></path>
            </svg>
        </a>
        <a
            class="w-12 h-12 flex justify-center items-center rounded-full hover:bg-slate-300 transition"
            href="https://twitter.com/frankuxui"
            target="__blank"
        >
            <svg
            xmlns="http://www.w3.org/2000/svg"
            width="25"
            height="25"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            version="1.1"
            viewBox="0 0 24 24"
            >
            <path
                fill="currentColor"
                d="M22.46,6C21.69,6.35 20.86,6.58 20,6.69C20.88,6.16 21.56,5.32 21.88,4.31C21.05,4.81 20.13,5.16 19.16,5.36C18.37,4.5 17.26,4 16,4C13.65,4 11.73,5.92 11.73,8.29C11.73,8.63 11.77,8.96 11.84,9.27C8.28,9.09 5.11,7.38 3,4.79C2.63,5.42 2.42,6.16 2.42,6.94C2.42,8.43 3.17,9.75 4.33,10.5C3.62,10.5 2.96,10.3 2.38,10C2.38,10 2.38,10 2.38,10.03C2.38,12.11 3.86,13.85 5.82,14.24C5.46,14.34 5.08,14.39 4.69,14.39C4.42,14.39 4.15,14.36 3.89,14.31C4.43,16 6,17.26 7.89,17.29C6.43,18.45 4.58,19.13 2.56,19.13C2.22,19.13 1.88,19.11 1.54,19.07C3.44,20.29 5.7,21 8.12,21C16,21 20.33,14.46 20.33,8.79C20.33,8.6 20.33,8.42 20.32,8.23C21.16,7.63 21.88,6.87 22.46,6Z"
            ></path>
            </svg>
        </a>
        <a
            class="w-12 h-12 flex justify-center items-center rounded-full hover:bg-slate-300 transition"
            href="https://dribbble.com/frankuxui"
            target="__blank"
        >
            <svg
            xmlns="http://www.w3.org/2000/svg"
            width="25"
            height="25"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            version="1.1"
            viewBox="0 0 24 24"
            >
            <path
                fill="currentColor"
                d="M13.01 13.188c.617 1.613 1.072 3.273 1.361 4.973-2.232.861-4.635.444-6.428-.955 1.313-2.058 2.989-3.398 5.067-4.018zm-.53-1.286c-.143-.32-.291-.638-.447-.955-1.853.584-4.068.879-6.633.883l-.01.17c0 1.604.576 3.077 1.531 4.223 1.448-2.173 3.306-3.616 5.559-4.321zm-3.462-5.792c-1.698.863-2.969 2.434-3.432 4.325 2.236-.016 4.17-.261 5.791-.737-.686-1.229-1.471-2.426-2.359-3.588zm7.011.663c-1.117-.862-2.511-1.382-4.029-1.382-.561 0-1.102.078-1.621.21.873 1.174 1.648 2.384 2.326 3.625 1.412-.598 2.52-1.417 3.324-2.453zm7.971-1.773v14c0 2.761-2.238 5-5 5h-14c-2.762 0-5-2.239-5-5v-14c0-2.761 2.238-5 5-5h14c2.762 0 5 2.239 5 5zm-4 7c0-4.418-3.582-8-8-8s-8 3.582-8 8 3.582 8 8 8 8-3.582 8-8zm-6.656-1.542c.18.371.348.745.512 1.12 1.439-.248 3.018-.233 4.734.049-.084-1.478-.648-2.827-1.547-3.89-.922 1.149-2.16 2.055-3.699 2.721zm1.045 2.437c.559 1.496.988 3.03 1.279 4.598 1.5-1.005 2.561-2.61 2.854-4.467-1.506-.261-2.883-.307-4.133-.131z"
            ></path>
            </svg>
        </a>
        </div>
    </footer>
</div>

How to create a Social cards template with Tailwind CSS?

Install tailwind css of verion 3.0.18

Use the script html tag to import the script of Tailwind CSS of the version 3.0.18

<script src="https://cdn.tailwindcss.com"></script>

All the unility class needed to create a Social cards template component

  • flex
  • py-8
  • flex-col
  • min-h-screen
  • bg-slate-300
  • box-border
  • max-w-7xl
  • mx-4
  • sm:columns-1
  • md:columns-2
  • lg:columns-3
  • xl:columns-3
  • mb-4
  • p-6
  • bg-white
  • bg-clip-border
  • max-w-md
  • pb-6
  • inline-block
  • mr-4
  • max-w-none
  • w-12
  • h-12
  • text-lg
  • text-slate-500
  • text-3xl
  • py-4
  • gap-1
  • mb-1
  • max-w-full
  • inline-flex
  • mr-2
  • relative
  • pt-2
  • pb-2
  • pl-3
  • w-full
  • h-11
  • bg-slate-100
  • placeholder:text-slate-600
  • pr-20
  • absolute
  • right-3
  • top-2/4
  • -mt-3
  • pt-6
  • pb-4
  • text-base
  • mt-2
  • py-2
  • mr-3
  • px-4
  • hover:bg-slate-50
  • py-3
  • block
  • text-center
  • hover:bg-slate-200
  • w-14
  • h-14
  • w-5
  • h-5
  • my-4
  • flex-1
  • h-2/4
  • h-full
  • mt-4
  • w-10
  • h-10
  • bg-violet-500
  • text-white
  • -m-1
  • border-2
  • border-white
  • w-6
  • ml-3
  • ml-auto
  • mt-6
  • mb-6
  • h-px
  • bg-slate-200
  • pr-6
  • pl-6
  • bg-gradient-to-r
  • px-6
  • text-blue-700
  • bg-yellow-500
  • text-black
  • mt-14
  • mb-3
  • hover:bg-slate-300

90 steps to create a Social cards template component with Tailwind CSS

  1. Use flex to create a block-level flex container.

  2. Control the vertical padding of an element to 2rem using the py-8 utilities.

  3. Use flex to create a block-level flex container.

  4. Set the minimum width/height of an element using the min-h-screen utilities.

  5. Control the background color of an element to slate-300 using the bg-slate-300 utilities.

  6. Use box-border utilities to set an element’s box-sizing to border-box, telling the browser to include the element’s borders and padding when you give it a height or width.

  7. Set the maximum width/height of an element using the max-w-7xl utilities.

  8. Control the horizontal margin of an element to 1rem using the mx-4 utilities.

  9. Use the sm:columns-1 utilities to set the ideal column width for the content within an element at only small screen sizes, with the number of columns (1) automatically adjusting to accommodate that value.

  10. Use the md:columns-2 utilities to set the ideal column width for the content within an element at only medium screen sizes, with the number of columns (2) automatically adjusting to accommodate that value.

  11. Use the lg:columns-3 utilities to set the ideal column width for the content within an element at only large screen sizes, with the number of columns (3) automatically adjusting to accommodate that value.

  12. Use the xl:columns-3 utilities to set the ideal column width for the content within an element at only extremely large screen sizes, with the number of columns (3) automatically adjusting to accommodate that value.

  13. Control the margin on bottom side of an element to 1rem using the mb-4 utilities.

  14. Control the padding on all sides of an element to 1.5rem using the p-6 utilities.

  15. Control the background color of an element to white using the bg-white utilities.

  16. Control the background color of an element to clip-border using the bg-clip-border utilities.

  17. Set the maximum width/height of an element using the max-w-md utilities.

  18. Control the padding on bottom side of an element to 1.5rem using the pb-6 utilities.

  19. Use inline-block utilities to wrap the element to prevent the text inside from extending beyond its parent.

  20. Control the margin on right side of an element to 1rem using the mr-4 utilities.

  21. Set the maximum width/height of an element using the max-w-none utilities.

  22. Use w-12 to set an element to a fixed width(3rem).

  23. Use h-12 to set an element to a fixed height(3rem).

  24. Control the text color of an element to lg using the text-lg utilities.

  25. Control the text color of an element to slate-500 using the text-slate-500 utilities.

  26. Control the text color of an element to 3xl using the text-3xl utilities.

  27. Control the vertical padding of an element to 1rem using the py-4 utilities.

  28. To specify the width between columns, you can use the gap-1 utilities.

  29. Control the margin on bottom side of an element to 0.25rem using the mb-1 utilities.

  30. Set the maximum width/height of an element using the max-w-full utilities.

  31. Use inline-flex to create an inline flex container that flows with text.

  32. Control the margin on right side of an element to 0.5rem using the mr-2 utilities.

  33. Use relative to position an element according to the normal flow of the document.

  34. Control the padding on top side of an element to 0.5rem using the pt-2 utilities.

  35. Control the padding on bottom side of an element to 0.5rem using the pb-2 utilities.

  36. Adjust the left padding of the element to 0.75rem using the pl-3 utilities class

  37. Use w-full to set an element to a 100% based width.

  38. Use h-11 to set an element to a fixed height(2.75rem).

  39. Control the background color of an element to slate-100 using the bg-slate-100 utilities.

  40. Control the text color of an element to slate-600undefined using the placeholder:text-slate-600 utilities.

  41. Control the padding on right side of an element to 5rem using the pr-20 utilities.

  42. Use absolute to position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn’t exist.

  43. Use the right-3 utilities to set the right position of a positioned element to 0.75rem.

  44. Use the top-2/4 utilities to set the top position of a positioned element to 2/4.

  45. Control the margin on top side of an element to -0.75rem using the -mt-3 utilities.

  46. Control the padding on top side of an element to 1.5rem using the pt-6 utilities.

  47. Control the padding on bottom side of an element to 1rem using the pb-4 utilities.

  48. Control the text color of an element to base using the text-base utilities.

  49. Control the margin on top side of an element to 0.5rem using the mt-2 utilities.

  50. Control the vertical padding of an element to 0.5rem using the py-2 utilities.

  51. Control the margin on right side of an element to 0.75rem using the mr-3 utilities.

  52. Control the horizontal padding of an element to 1rem using the px-4 utilities.

  53. Control the background color of an element to slate-50 using the hover:bg-slate-50 utilities on hover.

  54. Control the vertical padding of an element to 0.75rem using the py-3 utilities.

  55. Use inline utilities to put the element on its own line and fill its parent.

  56. Control the text color of an element to center using the text-center utilities.

  57. Control the background color of an element to slate-200 using the hover:bg-slate-200 utilities on hover.

  58. Use w-14 to set an element to a fixed width(3.5rem).

  59. Use h-14 to set an element to a fixed height(3.5rem).

  60. Use w-5 to set an element to a fixed width(1.25rem).

  61. Use h-5 to set an element to a fixed height(1.25rem).

  62. Control the vertical margin of an element to 1rem using the my-4 utilities.

  63. Use flex to create a block-level flex container.

  64. Use h-2/4 to set an element to a fixed height(2/4).

  65. Use h-full to set an element’s height to 100% of its parent, as long as the parent has a defined height.

  66. Control the margin on top side of an element to 1rem using the mt-4 utilities.

  67. Use w-10 to set an element to a fixed width(2.5rem).

  68. Use h-10 to set an element to a fixed height(2.5rem).

  69. Control the background color of an element to violet-500 using the bg-violet-500 utilities.

  70. Control the text color of an element to white using the text-white utilities.

  71. Control the margin on all sides of an element to -0.25rem using the -m-1 utilities.

  72. Control the border color of an element to 0.5rem using the border-2 utilities.

  73. Control the border color of an element to white using the border-white utilities.

  74. Use w-6 to set an element to a fixed width(1.5rem).

  75. Control the margin on left side of an element to 0.75rem using the ml-3 utilities.

  76. Control the margin on left side of an element to auto using the ml-auto utilities.

  77. Control the margin on top side of an element to 1.5rem using the mt-6 utilities.

  78. Control the margin on bottom side of an element to 1.5rem using the mb-6 utilities.

  79. Use h-px to set an element to a fixed height(px).

  80. Control the background color of an element to slate-200 using the bg-slate-200 utilities.

  81. Control the padding on right side of an element to 1.5rem using the pr-6 utilities.

  82. Adjust the left padding of the element to 1.5rem using the pl-6 utilities class

  83. Control the background color of an element to gradient-to-r using the bg-gradient-to-r utilities.

  84. Control the horizontal padding of an element to 1.5rem using the px-6 utilities.

  85. Control the text color of an element to blue-700 using the text-blue-700 utilities.

  86. Control the background color of an element to yellow-500 using the bg-yellow-500 utilities.

  87. Control the text color of an element to black using the text-black utilities.

  88. Control the margin on top side of an element to 3.5rem using the mt-14 utilities.

  89. Control the margin on bottom side of an element to 0.75rem using the mb-3 utilities.

  90. Control the background color of an element to slate-300 using the hover:bg-slate-300 utilities on hover.

Conclusion

The above is a step-by-step tutorial on how to use Tailwind CSS to create a Social cards template components, learn and follow along to implement your own components.