responsive home page

Related Examples

• 
  News feed

  Author:
  Bunny

  1 year ago

  13.1k
• 
  masonary grids effect for cards using columns

  As part of the redesign I was trying to think of ways to lay out testimonials from students, which may have varying length/content, I stumbled onto the idea of using a masonry layout (think bricks, think Pinterest).

  Author:
  rohit whyphy

  2 months ago

  511
• 
  Modern Testimonial

  A simple and easy to use component for reviews and testimonials.

  Author:
  Coastal UI

  3 months ago

  534
• 
  Linear infinite brand scrolling with hover effect

  Beautiful lineat brand scrolling partner with hover effect

  Author:
  Walid Ahmad

  8 months ago

  1.7k
• 
  Food Ordering Dashboard

  A responsive user interface for selecting and ordering your favorite meals. The dashboard allows users to browse food categories, view dish details, and place orders with ease.

  Author:
  Muhammad Umair Arshad

  6 days ago

  16
• 
  Animated Ripple Avatar

  Ripple Effect Avatar (Tailwind CSS Component) A visually striking animated component that displays a centered avatar or image surrounded by expanding ripple circles. Built with Tailwind CSS and custom animations, this effect simulates a pulsing or water ripple reaction, drawing attention to the central image. Ideal for user profile sections, hero banners, landing pages, or highlighted features in modern web interfaces. The ripples gradually fade and expand, creating a soft, calming motion that enhances interactivity and depth.

  Author:
  Acode Master(Mfuranziza Dusabe Hamza)

  1 week ago

  68
• 
  YouTube Community Post UI Mockup

  A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

  Author:
  Hamza Atig

  1 month ago

  289
• 
  Neon container

  Author:
  Anonymous

  1 year ago

  2.8k
• 
  Tag Input field

  This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

  Author:
  Ranit Saha

  4 months ago

  842
• 
  Portfolio

  This responsive portfolio with dark mode support includes: 1. Fully responsive design that works on both desktop and mobile devices 2. Dark mode toggle with system preference detection and local storage persistence 3. Indigo-800 and Blue-900 color scheme for primary colors in light and dark modes 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections using Intersection Observer 2. Hover effects on projects and buttons 3. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Projects, and Contact 7. A contact form with styled inputs 8. Social media links in the footer 9. Accessibility considerations (proper heading structure, color contrast, focus styles, ARIA labels) Key features: - The color scheme uses Indigo-800 for light mode and orange-400 for dark mode as primary colors - Dark mode toggle in the header with a sun/moon icon - Sections fade in and slide up as they enter the viewport - Project cards have a hover effect with scaling and increased shadow - The contact form has animated focus states - Social media icons change color on hover - The layout is responsive, with a hamburger menu for mobile screens - Smooth scrolling behavior for navigation links - Dark mode preference is saved in local storage and syncs with system preference This implementation provides a visually appealing, accessible, and functional responsive portfolio with dark mode support, using HTML, Tailwind CSS, and vanilla JavaScript for the

  Author:
  nejaa badr

  7 months ago

  2.2k
• 
  Instagram Post UI Mockup

  A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

  Author:
  Hamza Atig

  1 month ago

  260
• 
  simple responsive blog layout with sidebar

  Author:
  Isabella Kowalski

  2 years ago

  8.9k