abcdabcd

Related Examples

• 
  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

  4 months ago

  690
• 
  Twitter Post (Tweet) UI Mockup

  A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

  Author:
  Hamza Atig

  2 months ago

  204
• 
  Stepper - Without Buttons

  Author:
  farisubuntu

  10 months ago

  1.2k
• 
  Life Tree

  by salvator

  Author:
  Baraka Salvator

  1 month ago

  194
• 
  portfolio

  This portfolio page for Claire includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support (the design is already dark-themed) 4. Beautiful animations and effects: 1. Fade-in and slide-up animations for sections 2. Animated skill bars 3. Hover effects on projects and buttons 4. Smooth scrolling for navigation 5. Mobile-friendly navigation with a toggle menu 6. Sections for About, Skills, 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) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The header and footer have a frosted glass effect using backdrop filters - Text is white for high contrast against the dark background - Sections fade in and slide up as they enter the viewport - Skill bars animate when the skills section is in view - Project cards have a hover effect with scaling and increased opacity - 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 This implementation provides a visually appealing and functional portfolio page for Claire, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions and animations.

  Author:
  nejaa badr

  8 months ago

  1.7k
• 
  Contact us Form with Responsive

  Author:
  KULDEEP

  1 week ago

  28
• 
  Apple Dock Navigation Bar

  Author:
  Cristian

  6 months ago

  918
• 
  Energy Efficiency Program - Oklahoma

  Code for new IT proposal

  Author:
  Mario Williams

  1 month ago

  32
• 
  Payment form

  Author:
  ORGIN_DREAMS

  1 month ago

  120
• 
  Chat template

  fullscreen chat template suitable for mobile devices

  Author:
  Manon Daniel

  2 years ago

  17k
• 
  Interactive Game Flip Card – Pure HTML & CSS Component

  An elegant and interactive game info flip card built purely with HTML and CSS. This component flips smoothly on hover to reveal detailed game information on the back, providing a modern and engaging way to showcase your games without using JavaScript. Perfect for gaming websites wanting sleek animations and clean design.

  Author:
  Code Master(Mfuranziza Dusabe Hamza)

  1 month ago

  318
• 
  Tailwind CSS Navbar

  Logo on the left. Main menu with a mega menu under "Services". Responsive design with a hamburger menu for mobile devices. Mega menu appears on hover for desktop and toggles on click for mobile.

  Author:
  KULDEEP

  3 weeks ago

  72