Windows

Related Examples

• 
  Floating Call Widget

  Floating Call Widget - Pure CSS + HTML + JS

  Sayista Yazdani

  1 month ago

  24
• Read more / Show more button with hide button

  "hide" button that appears when the additional content is displayed:

  Prajwal Hallale

  3 years ago

  22.2k
• 
  Sticky fullpage pages / slides

  Sticky full page

  harinandana

  11 months ago

  1k
• 
  Calculator

  This calculator uses CSS although it can be passed directly to tailwind

  Ameth Galarcio

  2 years ago

  2.6k
• 
  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

  806
• 
  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
• 
  Speedometer Example

  Internet speed meter, gauge meter

  Brandon D

  4 years ago

  15.2k
• 
  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
• 
  Music Player

  Abhijit Sen

  3 years ago

  18.4k
• 
  Dashboard Stats Widget

  Here’s a sleek Stats Widget built with Tailwind CSS that you can sell on TailwindFlex. It includes animated hover effects, trend indicators, and responsive design.

  dev-fab250

  1 year ago

  2.4k
• 
  Sticky fullpage pages / slides

  Hasan AlDoy (McDoy)

  1 year ago

  1.9k
• 
  PartLar subscription widget

  part

  Anonymous

  8 months ago

  764