Tailwind CSS Responsive Single Page Blog Post Example

In this tutorial, we will create single page blog, single page blog template, single page blog with heroicons icon and image , examples with Tailwind CSS.



Example 1

Tailwind CSS Simple Single Page Blog Post

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Tailwind CSS Single Blog Example </title>
        <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

    </head>

    <body>
        <div class="container mx-auto">
            <div class="w-full mt-8">
                <h1 class="text-4xl font-bold leading-tight text-gray-800">
                    Tailwind CSS Single Blog Example
                </h1>
                <div class="flex space-x-6">
                    <span class="text-sm text-gray-600">December 13, 2022 </span>
                    <span class="text-sm text-gray-600">Auther Name </span>
                </div>
            </div>
            <div class="flex flex-col mt-8">
                <div class="w-full px-4 text-lg leading-relaxed text-gray-700 lg:px-0">
                    <p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe asperiores facere
                        maxime libero alias enim recusandae quibusdam laborum. Fugiat aspernatur velit optio neque
                        quos temporibus autem delectus fuga tempora unde! Lorem ipsum dolor sit amet consectetur
                        adipisicing elit. Saepe asperiores facere
                        maxime libero alias enim recusandae quibusdam laborum. Fugiat aspernatur velit optio neque
                        quos temporibus autem delectus fuga tempora unde!.</p>
                    <p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe asperiores facere
                        maxime libero alias enim recusandae quibusdam laborum. Fugiat aspernatur velit optio neque
                        quos temporibus autem delectus fuga tempora unde! Lorem ipsum dolor sit amet consectetur
                        adipisicing elit. Saepe asperiores facere
                        maxime libero alias enim recusandae quibusdam laborum. Fugiat aspernatur velit optio neque
                        quos temporibus autem delectus fuga tempora unde!.</p>
                    <ul class="mb-4 list-disc">
                        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                    </ul>
                    <h2 class="mt-4 mb-4 text-2xl font-semibold text-gray-800">Second lorem ipsum dolor sit amet
                        consectet</h2>

                    <p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe asperiores facere
                        maxime libero alias enim recusandae quibusdam laborum. Fugiat aspernatur velit optio neque
                        quos temporibus autem delectus fuga tempora unde! Lorem ipsum dolor sit amet consectetur
                        adipisicing elit. Saepe asperiores facere
                        maxime libero alias enim recusandae quibusdam laborum. Fugiat aspernatur velit optio neque
                        quos temporibus autem delectus fuga tempora unde!.</p>

                </div>
            </div>
            <h3 class="text-2xl font-bold">Tags</h3>
            <div class="flex items-center justify-start mt-4 mb-4">
                <a href="#"
                    class="px-2 py-1 mr-4 font-bold text-white bg-indigo-400 rounded-lg hover:bg-indigo-500">Laravel</a>
                <a href="#"
                    class="px-2 py-1 mr-4 font-bold text-white bg-indigo-400 rounded-lg hover:bg-indigo-500">Tips</a>
                <a href="#" class="px-2 py-1 font-bold text-white bg-indigo-400 rounded-lg hover:bg-indigo-500">Tailwind
                    CSS
                </a>
            </div>
            <hr>
            <div class="flex mt-8">
                <div class="w-full mt-16 md:mt-0 ">
                    <form class="rounded-lg">
                        <h3 class="mb-6 text-2xl font-medium">Write a comment</h3>
                        <textarea type="text" name="message"
                            class="w-full px-4 py-3 mb-4 border border-gray-200 rounded-lg focus:ring-1 focus:ring-indigo-500 focus:outline-none"
                            placeholder="Write your comment" rows="5" cols="33"></textarea>
                        <input type="submit" value="Submit" name="submit"
                            class="px-6 py-2 text-white bg-indigo-600 rounded cursor-pointer ">
                    </form>
                </div>
            </div>
        </div>
    </body>

</html>



Example 2

Tailwind CSS Single Page Blog Post with image

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Tailwind CSS Single Page Blog Post with image </title>
        <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

    </head>

    <body>
        <div class="container mx-auto">
            <div class="w-full mb-4">
                <div class="px-4 lg:px-0">
                    <h2 class="text-4xl font-bold leading-tight text-gray-800">
                        Tailwind CSS Single Blog Example
                    </h2>

                    <div class="flex items-center my-2 text-sm text-gray-500">
                        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6 mb-1 mr-1" fill="none"
                            viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg> December 10, 2022
                        <h5 class="ml-2"><svg xmlns="http://www.w3.org/2000/svg" class="inline-flex w-6 h-6" fill="none"
                                viewBox="0 0 24 24" stroke="currentColor">
                                <path d="M12 14l9-5-9-5-9 5 9 5z" />
                                <path
                                    d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z" />
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                    d="M12 14l9-5-9-5-9 5 9 5zm0 0l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14zm-4 6v-7.5l4-2.222" />
                            </svg>Category</h5>
                    </div>
                </div>

                <img src="https://source.unsplash.com/user/erondu/2700x900" class="object-cover w-full lg:rounded" />
            </div>
            <div class="flex flex-col lg:flex-row lg:space-x-12">
                <div class="w-full px-4 mt-12 text-lg leading-relaxed text-gray-700 lg:px-0 lg:w-3/4">
                    <p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe asperiores facere
                        maxime libero alias enim recusandae quibusdam laborum. Fugiat aspernatur velit optio neque
                        quos temporibus autem delectus fuga tempora unde! Lorem ipsum dolor sit amet consectetur
                        adipisicing elit. Saepe asperiores facere
                        maxime libero alias enim recusandae quibusdam laborum. Fugiat aspernatur velit optio neque
                        quos temporibus autem delectus fuga tempora unde!.</p>
                    <p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe asperiores facere
                        maxime libero alias enim recusandae quibusdam laborum. Fugiat aspernatur velit optio neque
                        quos temporibus autem delectus fuga tempora unde! Lorem ipsum dolor sit amet consectetur
                        adipisicing elit. Saepe asperiores facere
                        maxime libero alias enim recusandae quibusdam laborum. Fugiat aspernatur velit optio neque
                        quos temporibus autem delectus fuga tempora unde!.</p>

                    <div class="pl-4 mb-6 italic border-l-4 border-blue-500 rounded">
                        Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur
                    </div>

                    <h2 class="mt-4 mb-4 text-2xl font-semibold text-gray-800">Second lorem ipsum dolor sit amet
                        consectet</h2>

                    <p class="mb-4">Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe asperiores facere
                        maxime libero alias enim recusandae quibusdam laborum. Fugiat aspernatur velit optio neque
                        quos temporibus autem delectus fuga tempora unde! Lorem ipsum dolor sit amet consectetur
                        adipisicing elit. Saepe asperiores facere
                        maxime libero alias enim recusandae quibusdam laborum. Fugiat aspernatur velit optio neque
                        quos temporibus autem delectus fuga tempora unde!.</p>
                    <ul class="list-decimal">
                        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                        <li>Lorem ipsum dolor sit amet consectetur adipisicing elit.</li>
                    </ul>
                </div>

                <div class="w-full max-w-screen-sm m-auto mt-12 lg:w-1/4">
                    <div class="p-4 border-t border-b md:border md:rounded">
                        <div class="flex py-2">
                            <img src="https://source.unsplash.com/user/erondu/1600x900"
                                class="object-cover w-10 h-10 mr-2 rounded-full" />
                            <div>
                                <p class="text-sm font-semibold text-gray-700"> Jone doe </p>
                                <p class="text-xs font-semibold text-gray-600"> Admin </p>
                            </div>
                        </div>
                        <p class="py-3 text-justify text-gray-700">
                            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Aliquam, veniam, id
                            consequatur expedita natus dolore obcaecati incidunt impedit
                        </p>
                        <div>
                            <button
                                class="flex items-center justify-center w-full px-2 py-1 text-blue-200 bg-blue-600 rounded">
                                Follow
                                <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5" fill="none" viewBox="0 0 24 24"
                                    stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                        d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
                                </svg>
                            </button>
                        </div>
                    </div>

                </div>

            </div>
            <h3 class="mt-12 text-2xl font-bold">Tags</h3>
            <div class="flex items-center justify-start mt-4 mb-4">
                <a href="#"
                    class="px-2 py-1 mr-4 font-bold text-white bg-indigo-400 rounded-lg hover:bg-indigo-500">Laravel</a>
                <a href="#"
                    class="px-2 py-1 mr-4 font-bold text-white bg-indigo-400 rounded-lg hover:bg-indigo-500">Tips</a>
                <a href="#" class="px-2 py-1 font-bold text-white bg-indigo-400 rounded-lg hover:bg-indigo-500">Tailwind
                    CSS
                </a>
            </div>
            <hr>
            <div class="flex mt-8">
                <div class="w-full mt-16 md:mt-0 ">
                    <form class="rounded-lg">
                        <h3 class="mb-6 text-2xl font-medium">Write a comment</h3>
                        <textarea type="text" name="message"
                            class="w-full px-4 py-3 mb-4 border border-gray-200 rounded-lg focus:ring-1 focus:ring-indigo-500 focus:outline-none"
                            placeholder="Write your comment" rows="5" cols="33"></textarea>
                        <input type="submit" value="Submit" name="submit"
                            class="px-6 py-2 text-white bg-indigo-600 rounded cursor-pointer ">
                    </form>
                </div>
            </div>

        </div>
    </body>

</html>