Number counter input

This tailwind example is contributed by Prem.., on 14-Feb-2023. Component is made with Tailwind v3.4.

Tailwind v3.4 16.8k 16

decrementBtn.addEventListener('click', () => {
        if (count > 1) {
            count--;
            counterEl.textContent = count;
        }
    });

incrementBtn.addEventListener('click', () => {
        count++;
        counterEl.textContent = count;
    });
</script>

Related Examples

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
Music Player

Abhijit Sen

3 years ago

18.4k
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
Speedometer Example
Internet speed meter, gauge meter

Brandon D

4 years ago

15.2k
WYSIWYG Editor Form
Form with CKEditor

I.P. Leroy

3 years ago

16.3k
Detect Screen Breakpoints with Tailwind CSS

Prajwal Hallale

4 years ago

8.6k
Simple count down timer

Gopi Yadav

3 years ago

15.5k
Code card with copy Button
this example uses clipboard.js to copy the code

Joost Hietbrink

1 year ago

1.5k
Multi-Step Form Wizard
Working Multi-Step Form more complex forms. made with tailwind CSS v3 and javascript

Quentin Rivers

2 years ago

7.7k
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

813
Strong password generator
With following options Password length: Include Uppercase Letters: Include Numbers: Include Symbols:

S. Patel

3 years ago

10.3k
Dialpad with display text
A simple dialpad fork from @brandon and added display text and changed color

Jerome Soriano

2 years ago

2.5k