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

3.2k

6

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

Blog page

Author:
Ron Hicks

2 years ago

10.3k
Notification
Dev Community Notification Clone

Author:
Samuel Abera

3 months ago

1.5k
Blog Template

Author:
Mr Robot

2 years ago

9.5k
Clone of LinkedIn Questionnaire Card
Clone of LinkedIn Questionnaire Card

Author:
Samuel Abera

10 months ago

2.7k
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

9 months ago

3.1k
Simple dialpad

Author:
Brandon D

1 year ago

10.7k
LinkedIn sign-up form
A clone of LinkedIn sign-up page

Author:
Nomusa Botha

8 months ago

946
Blog, card

Author:
Алла Телегина

1 month ago

185
newPost

Author:
farisubuntu

8 months ago

1.4k
Blog Article Template
blog article template

Author:
Anonymous

1 year ago

13.1k
Facebook Login page
Facebook Login page

Author:
Rehman Arshad

8 months ago

1.7k
Twitter tweet clone
Replica of twitter tweet card

Author:
Sophia Baker

2 years ago

9.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1