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

1.9k

3

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

Trending Users
Tailwind Flex Trending Users Card Design

Author:
Samuel Abera

5 months ago

1.9k
Kids E-learning Platform Card
Kids E-learning Platform Card Clone

Author:
Samuel Abera

1 week ago

86
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

6 months ago

2.2k
Blog page template

Author:
Ron Hicks

1 year ago

11.5k
Linkedin Add to your feed Clone
Linkedin Add to your feed Clone

Author:
Samuel Abera

6 months ago

1.5k
Facebook Login page
Facebook Login page

Author:
Rehman Arshad

5 months ago

815
Notification
Dev Community Notification Clone

Author:
Samuel Abera

2 days ago

49
Simple blog layout

Author:
Shakti

1 year ago

9.2k
simple responsive blog layout with sidebar

Author:
Isabella Kowalski

1 year ago

8.1k
Clone of LinkedIn Questionnaire Card
Clone of LinkedIn Questionnaire Card

Author:
Samuel Abera

7 months ago

2.1k
Twitter tweet clone
Replica of twitter tweet card

Author:
Sophia Baker

1 year ago

8.7k
Blog Template

Author:
Mr Robot

2 years ago

9.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent

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

© 2024 TailwindFlex. All Rights Reserved.

v1.8