JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div class="accordion">
        
            <section id="one">
                <h2><a href="#one">Heading 1</a></h2>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
                </div>
            </section>
            
            <section id="two">
                <h2><a href="#two">Heading 2</a></h2>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
                </div>
            </section>
            
            <section id="three">
                <h2><a href="#three">Heading 3</a></h2>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>
                </div>
            </section>
            
            <section id="four">
                <h2><a href="#four">Heading 4</a></h2>
                <div>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.</p>                                        
               ...

CSS

.accordion
{
    background-color: #eee;
     border: 1px solid #ccc;
    width: 600px;
    padding: 10px;    
    margin: 30px auto;
    
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    
    -moz-box-shadow: 0 1px 0 #999;
    -webkit-box-shadow: 0 1px 0 #999;
    box-shadow: 0 1px 0 #999;
}
 
.accordion section 
{
     border-bottom: 1px solid #ccc;
    margin: 5px;
    
    background-color: #fff;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
    background-image: -webkit-linear-gradient(top, #fff, #eee);
    background-image:    -moz-linear-gradient(top, #fff, #eee);
    background-image:     -ms-linear-gradient(top, #fff, #eee);
    background-image:      -o-linear-gradient(top, #fff, #eee);
    background-image:         linear-gradient(top, #fff, #eee);
  
      -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.accordion h2,
 .accordion p
{
    margin: 0;
    
}

.accordion p
{
    padding: 10px;
}
 
.accordion h2 a 
{
    display: block;
    position: relative;
    font: 14px/1 'Trebuchet MS', 'Lucida Sans';
    padding: 10px;
    color: #333;
    text-decoration: none;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.accordion h2 a:hover 
{
    background: #fff;
}
 
.accordion h2 + div 
{
    height: 0;
    overflow: hidden;
    -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;    
}

.accordion :target h2 a:after 
{  
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -3px;
    border-top: 5px solid #333;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;    
}

.accordion :target h2 + div 
{
    height: 100px;
}