Detect Screen Breakpoints with Tailwind CSS

Related Examples

• 
  Music Player

  Abhijit Sen

  3 years ago

  18.4k
• 
  Number counter input

  Prem..

  3 years ago

  16.8k
• 
  Strong password generator

  With following options Password length: Include Uppercase Letters: Include Numbers: Include Symbols:

  S. Patel

  3 years ago

  10.3k
• 
  Code card with copy Button

  this example uses clipboard.js to copy the code

  Joost Hietbrink

  1 year ago

  1.5k
• 
  WYSIWYG Editor Form

  Form with CKEditor

  I.P. Leroy

  3 years ago

  16.3k
• 
  Sticky fullpage pages / slides

  Hasan AlDoy (McDoy)

  1 year ago

  2k
• Sticky fullpage pages / slides

  Laurits

  3 years ago

  16.6k
• 
  3D Count downer

  Hasan AlDoy (McDoy)

  5 months ago

  319
• 
  Dash.OS: Drag & Drop Dashboard Widget System

  A fully interactive, freeform dashboard builder for the browser. Drop in widgets, drag them anywhere, resize to fit, and your layout is automatically remembered. Ships with a live Chart.js revenue chart, KPI stats, a task tracker, and a notifications feed, all in a single zero-dependency HTML file with dark/light mode built in.

  Ijila Itunu

  7 months ago

  961
• 
  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

  873
• 
  partql

  partql

  sh22gr

  8 months ago

  866
• Simple count down timer

  Gopi Yadav

  3 years ago

  15.5k