Home
Samuel Abera
Linkedin Post

Linkedin Post

This tailwind example is contributed by Samuel Abera, on 10-May-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are blog page template, article page template,copy

Blog post page Clone

Author Samuel Abera

358

Fork Fullscreen

<link rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />

<div class="w-full h-screen bg-gray-300 dark:bg-gray-900">
    <div class="xl:w-[40%] lg:w-[60%] md:w-[70%] xs:w-[96%] mx-auto h-full flex items-center justify-center">
        <div
            class="w-full flex flex-col gap-1 p-2 border shadow-lg rounded-xl mx-2 bg-white dark:border-gray-400 dark:bg-gray-800">
            <div class="flex items-center gap-2 pt-2">
                <img src="https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w0NzEyNjZ8MHwxfHNlYXJjaHw3fHxwZW9wbGV8ZW58MHwwfHx8MTcxMTExMTM4N3ww&ixlib=rb-4.0.3&q=80&w=1080" alt="User profile" class="w-[3.5rem] h-[3.5rem] rounded-full" />
                <textarea rows="1" class="w-full resize-none truncate border border-gray-400 rounded-full p-[12px] text-left xs:text-sm sm:text-lg  dark:bg-gray-700 dark:text-white dark:border-gray-500" placeholder="Start a post, try writing with AI"></textarea>
            </div>

<div class="flex sm:px-4 mt-2 justify-between">
                <div
                    class="flex items-center gap-2 p-2 rounded-sm cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
                    <span class="material-symbols-outlined text-blue-400">panorama</span>
                    <h3 class="text-sm font-semibold text-gray-600 dark:text-gray-300">Media</h3>
                </div>

<div
                    class="flex items-center gap-2 p-2 rounded-sm cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
                    <span class="material-symbols-outlined text-yellow-700">calendar_month</span>
                    <h3 class="text-sm font-semibold text-gray-600 dark:text-gray-300">Event</h3>
                </div>

<div
                    class="flex items-center gap-2 sm:p-2 xs:p-1 rounded-sm cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700">
                    <span class="material-symbols-outlined text-orange-400">newsmode</span>
                    <h3 class="text-sm sm:font-semibold xs:truncate text-gray-600 dark:text-gray-300">Write article</h3>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

A Captivating Blog Post
Blog post page that grabs attention with a headline hero, immerses readers in compelling content, and delights them with visually appealing elements.

Author:
Samuel Abera

1 month ago

420
simple responsive blog layout with sidebar

Author:
Isabella Kowalski

1 year ago

7.2k
Simple dialpad

Author:
Brandon D

1 year ago

9.8k
Clone of Google’s Search Functionality
This Tailwind CSS example, contributed by Bishnu Thapa on April 4th, 2024, showcases a responsive component designed using version 3.4 of Tailwind CSS. It is responsive.

Author:
Bishnu Thapa

2 months ago

635
Blog Template

Author:
Mr Robot

1 year ago

8k
newPost

Author:
farisubuntu

1 month ago

58
LinkedIn sign-up form
A clone of LinkedIn sign-up page

Author:
Nomusa Botha

1 week ago

13
Trending Users
Tailwind Flex Trending Users Card Design

Author:
Samuel Abera

1 month ago

320
Minimal blog page

Author:
Ron Hicks

1 year ago

9.2k
Twitter tweet clone
Replica of twitter tweet card

Author:
Sophia Baker

1 year ago

8.1k
Google.com search page clone

Author:
Mr Robot

1 year ago

9.2k
Blog page

Author:
Ron Hicks

1 year ago

8.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 1400+ componenent

TailwindFlex.com

Tailwindflex.com is a free tailwind examples library. It's a one-stop destination for ready-made tailwind examples.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components

© 2024 TailwindFlex. All Rights Reserved.

v1.6