A
Anonymous

Social Media Post - Copy this React, Tailwind Component to your project

Design-a-modern-UI-inspired-by-a-social-media-post-interface-with-the-following-features:-1.-**Layout**:---A-split-screen-design-with-three-main-sections:---**Profile-and-Author-Info**-(left):-Includes-the-author's-profile-picture,-name,-role-(e.g.,-Admin),-and-a-description-about-their-activities-or-contributions.---**Main-Content**-(center):-Displays-a-post-with-a-title,-short-description,-a-button-to-read-more,-and-a-highlighted-TLDR-section-for-quick-insights.---**Comments-Section**-(right):-Initially-hidden,-but-slides-in-from-the-right-when-a-button-or-comment-icon-is-clicked.-2.-**Interaction**:---When-the-comment-icon-is-clicked,-the-comments-section-smoothly-slides-from-the-right-onto-the-screen.---Ensure-alignment-and-spacing-are-clean-for-all-screen-sizes,-with-responsiveness-for-mobile-and-desktop-views.-3.-**Styling**:---Use-a-clean,-modern-design-with-subtle-shadows-and-rounded-corners.---Apply-a-light-theme-with-a-neutral-color-palette-and-distinguishable-accent-colors-for-buttons-and-highlights-(e.g.,-purple-or-blue-for-emphasis).-4.-**Components**:---**Left-Panel**:---Profile-picture-at-the-top.---User-information-below,-including-name,-role,-and-a-brief-bio.---Follow-or-join-button-at-the-bottom.---**Center-Panel**:---Post-title-and-a-clickable-“Read-More”-button.---A-highlighted-TLDR-section-in-a-distinct-color-background.---Social-sharing-buttons-below-the-content-(e.g.,-Copy-link,-WhatsApp,-Facebook).---**Right-Panel**:---Comments-displayed-in-a-scrollable-vertical-layout.---Add-a-sorting-option-(e.g.,-"Oldest-first").---A-button-for-adding-new-comments.-5.-**Transitions**:---Smooth-sliding-animation-for-the-comments-panel-(e.g.,-300ms-ease-in-out).---Hover-effects-on-buttons-for-better-interactivity.-Ensure-the-layout-is-clean-and-visually-appealing,-with-proper-spacing-between-elements.-Design-it-in-Flutter-or-any-modern-front-end-framework-like-React,-ensuring-modularity-for-future-customization.

Prompt
Component Preview

About

SocialMediaPost - A split-screen layout with profile info, main content, and comments. Built with React and Tailwind. Access free code!

Share

Last updated 1 month ago