JSFiddle - React, Tailwind, and code Playground

by w3cplus

HTML

<div class="verticalAccordion">
        <ul>
            <li>
                <h3>Heading 1</h3>
                <div>Content for Panel 1.</div>
            </li>
            <li>
                <h3>Heading 2</h3>
                <div>Content for panel 2.</div>
            </li>
            <li>
                <h3>Headgin 3</h3>
                <div>Content for panel 3.</div>
            </li>
            <li>
                <h3>Heading 4</h3>
                <div>Content for panel 4.</div>
            </li>
        </ul>
    </div>

CSS

*{
            margin: 0;
            padding: 0;
        }
        
        body {
            padding: 20px 100px;
        }
        
        .verticalAccordion {
            width: 500px;
            margin: 0 auto;
        }
        
        .verticalAccordion ul {
            width: 100%;
            margin: 0;
            padding: 0;
        }
        
        .verticalAccordion li {
            list-style: none outside none;
            display: block;
            margin: 0;
            padding: 0;
            height: 40px;
            width: 100%;
            overflow: hidden;
            background: #f0f0f0;
            -moz-transition: height 0.3s ease-in-out;
            -webkit-transition: height 0.3s ease-in-out;
            -o-transition: height 0.3s ease-in-out;
            transition: height 0.3s ease-in-out;
        }
        
        .verticalAccordion h3 {
            margin: 0;
            padding: 10px;
            height: 19px;
            border-top: 1px solid #f0f0f0;
            text-transform: uppercase;
            color: #000;
            background: #ccc;
            cusor: pointer;
            position: relative;
            background: -moz-linear-gradient( top, #999999, #cccccc);
            background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
            background: -webkit-linear-gradient( top, #999999, #cccccc);
            background: -o-linear-gradient( top, #999999, #cccccc);
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc); 
            -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)";   
        }
        
        .verticalAccordion h3:before {
            content:"";
            border: 5px solid #000;
            border-color: #000 transparent transparent;
            position: absolute;
            right: 10px;
            top: 15px;
            width: 0;
           ...