JSFiddle - React, Tailwind, and code Playground

by Emmanuel Garcia

HTML

<ul class="accordion">
    <li>
        <label for="q-1">Content 1</label>
        <input type="radio" name="a" id="q-1" checked="checked">
        <div class='content'>
            <p>Content 1 blah blah blah blah</p>
        </div>
    </li>
 
    <li>
        <label for="q-2">Content 2</label>
        <input type="radio" name="bish" id="q-2">
        <div class='content'>
            <p>Content 2 blah blah blah blah</p>
        </div>
    </li>

</ul>

CSS

/* Clean up the lists styles */
    ul.accordion {
    list-style: none;
    margin: 0;
    padding: 0;
    }

    /* Hide the radio buttons */
    /* These are what allow us to toggle content panes */
    ul.accordion label + input[type='radio'] {
    display: none;
    }
    
    /* Give each content pane some styles */
    ul.accordion li {
        background-color: #fff;
        border-bottom: 1px solid #DDDDDD;
    }
    
    ul.accordion ul {
    	margin-top: -15px;
    }
  
    /* Make the main tab look more clickable */
    ul.accordion label {
        background-color: #666666;
    	color: #FFFFFF;
    	display: block;
    	padding: 10px;
    	margin: -5px -10px;
    	font-size: 16px;
    	font-weight: 700;
    }
        
    /* Set up the div that will show and hide */
    ul.accordion div.content {
        overflow: hidden;
        padding: 0 10px;
        display: none;
    }
    
    /* Show the content boxes when the radio buttons are checked */
   input[type='radio']:checked + div.content {
    	display: block; background-color:red;
    }
    
       input[name=bish]:checked + div.content {
    	display: block; background-color:green !important;
    }