HTMX + Tailwind QA Playground
Practice your test automation skills on this HTMX-based playground. Modern hypermedia-driven approach with Tailwind CSS styling.
Forms & Inputs
Text, date, select, color picker, textarea controls
Shadow DOM
Encapsulated components for testing
Iframes
Nested iframe content handling
Data Tables
Paginated tables with 100 records
Miscellaneous
Sliders, toggles, modals, tabs, media & more
Student Details
Parent Details
Additional Info
Father's Details (Iframe)
Mother's Details (Shadow DOM)
Child Details (Standard Table)
| Child Name | Age | Grade |
|---|---|---|
| Emily Doe | 10 | 5th Grade |
| James Smith | 7 | 2nd Grade |
| Sarah Johnson | 12 | 7th Grade |
1. Drag & Drop Zone
Drag and drop a file here, or click to select
2. Text Box + Browse Button
3. Standard HTML Input
4. Multiple Files Upload
5. Image Upload with Preview
Assignment.docx
Microsoft Word Document
Student_Report.pdf
PDF Document
Notes.txt
Plain Text File
Grades.csv
CSV Data File
Native Dialogs
Window Events
When enabled, closing the page will trigger a confirmation dialog
Native System
Console Output
JS Exceptions
Network Errors
1. Gallery with Tooltips
Coding
Laptop
Keyboard
Technology
2. Image Carousel
Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
3. Downloadable Images
Student Records
| ID | Name | Grade |
|---|
Employee Data Grid
Student Table
| Student Name | Parent Name | Age | Profile Link | Action | Edit / Delete |
|---|---|---|---|---|---|
| Emma Thompson | Robert Thompson | 14 | View Profile | ||
| Liam Johnson | Sarah Johnson | 15 | View Profile | ||
| Olivia Williams | Michael Williams | 13 | View Profile | ||
| Noah Brown | Jennifer Brown | 16 | View Profile | ||
| Ava Davis | David Davis | 14 | View Profile | ||
| Ethan Miller | Lisa Miller | 15 | View Profile | ||
| Sophia Wilson | James Wilson | 13 | View Profile | ||
| Mason Moore | Patricia Moore | 16 | View Profile | ||
| Isabella Taylor | Christopher Taylor | 14 | View Profile | ||
| Lucas Anderson | Amanda Anderson | 15 | View Profile |
1. Sliders / Range Inputs
2. Toggle Switches
3. Progress Bars
4. Modal / Dialog
5. Alerts / Notifications
6. Menu / Dropdown
7. Tabs
Overview Tab
This is the overview panel content. It provides a high-level summary of the information.
8. Video / Audio Players
Video Player
Audio Player
SoundHelix - Song 1
Sample audio for testing
9. Spinner / Loader
10. Breadcrumb Navigation
11. Accordion
This playground is designed for QA engineers and test automation specialists to practice and test various UI components and interactions in a controlled environment.
12. Lists
Ordered List
Simple Ordered List
- First item
- Second item
- Third item
- Fourth item
- Fifth item
Nested Ordered List
- Parent Item 1
- a. Child item 1a
- b. Child item 1b
- Parent Item 2
- a. Child item 2a
- b. Child item 2b
- Parent Item 3
- a. Child item 3a
- b. Child item 3b
Unordered List
Simple Unordered List
- Apple
- Banana
- Orange
- Mango
- Grape
Nested Unordered List
- Fruits
- Apple
- Banana
- Cherry
- Vegetables
- Carrot
- Broccoli
- Spinach
Div-based List Group
13. Tree View
File Explorer
Selection Info
Currently Selected:
Instructions:
- Click on a folder or file to select it
- Click the arrow to expand/collapse folders
- Documents, Images folders are expanded by default
- Downloads folder is collapsed by default
14. Radio Button Group
Gender Selection
Selected Gender
Current Selection:
15. External Link
External Navigation
Click the link below to open an external website in a new browser tab.
Click Here