Dialpad with display text

Related Examples

• Exapnd and collapse button for large content

  Truncate and expand on click large content with javascript. uses line clamp.

  Komal Jain

  2 years ago

  3k
• 
  partql

  partql

  sh22gr

  7 months ago

  779
• 
  Weather Widget with 5-Day Forecast

  A clean, modern weather widget built with HTML, Tailwind CSS, and vanilla JavaScript. Perfect for integrating weather information into any web project. Features: - Current weather display with temperature, conditions, and "feels like" temperature - 5-day forecast with daily highs and lows - Temperature unit toggle (Celsius/Fahrenheit) - Weather statistics including wind speed, humidity, and visibility - Fully responsive design that works on all screen sizes - Smooth hover animations and transitions - Semantic HTML5 structure for better accessibility and SEO - Schema.org structured data (JSON-LD) for rich snippets - No dependencies except Tailwind CSS CDN - Easy to customize with Tailwind utility classes Technical Details: - Markup: Semantic HTML5 with proper document structure - Styling: Tailwind CSS v3.x via CDN (utility-first approach) - JavaScript: Vanilla ES6+ (no frameworks or libraries required) - Accessibility: WCAG 2.1 compliant with ARIA labels, semantic elements, and keyboard navigation support - SEO Optimization: - Structured data using JSON-LD (Schema.org WeatherForecast type) - Open Graph and Twitter Card meta tags for social sharing - Semantic heading hierarchy (h1, h2) - Descriptive meta descriptions and keywords - Performance: Lightweight (~8KB HTML), minimal JavaScript, CSS loaded from CDN - Browser Support: All modern browsers (Chrome, Firefox, Safari, Edge) - Mobile-First: Responsive grid layout with breakpoints for mobile, tablet, and desktop - **Customization:** Easily modify colors, layout, and data structure via Tailwind classes - State Management: Simple boolean toggle for temperature units with dynamic DOM updates - SVG Icons: Inline SVG graphics for weather conditions (scalable and customizable) API Integration Ready: The component uses mock data but is structured to easily integrate with weather APIs such as: - OpenWeatherMap - WeatherAPI - Visual Crossing - AccuWeather Simply replace the data object with your API response and map the fields accordingly.

  Ijila Itunu

  4 months ago

  793
• Sticky fullpage pages / slides

  Laurits

  3 years ago

  16.6k
• 
  Progress bar with Tailwind CSS and Javascript

  How to a create a scroll progress bar with Tailwind CSS and Javascript

  Michael Andreuzza

  2 years ago

  3.1k
• 
  3D Count downer

  Hasan AlDoy (McDoy)

  4 months ago

  318
• 
  Exapnd and collapse button for large content without javascript

  Truncate and expand on click large content without using JavaScript.

  Komal Jain

  2 years ago

  2.7k
• 
  Working back to top button

  The "Scroll to top" button becomes visible when the user starts to scroll the page Clicking on that button takes you back to the top of the page. This is a great feature to have on any website especially if your content is long.

  Prashant

  4 years ago

  15.6k
• 
  Code card with copy Button

  this example uses clipboard.js to copy the code

  Joost Hietbrink

  1 year ago

  1.5k
• 
  Detect Screen Breakpoints with Tailwind CSS

  Prajwal Hallale

  4 years ago

  8.6k
• 
  Sticky fullpage pages / slides

  Sticky full page

  harinandana

  10 months ago

  973
• 
  Sticky fullpage pages / slides

  Hasan AlDoy (McDoy)

  1 year ago

  1.9k