JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<script src="http://tympanus.net/Tutorials/FlexibleSlideToTopAccordion/js/jquery.accordion.js"></script>
<script src="http://tympanus.net/Tutorials/FlexibleSlideToTopAccordion/js/jquery.easing.1.3.js"></script>
            <h1>Flexible Slide-to-top Accordion <span>with jQuery</span></h1>

            <div class="wrapper">
                <div id="st-accordion" class="st-accordion">
                    <ul>
                        <li>
                            <a href="#">About<span class="st-arrow">Open or Close</span></a>
                            <div class="st-content">
                                <p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
                                <p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
                                <p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
                                <img src="images/1.jpg" alt="image01"/>
                                <img src="images/2.jpg" alt="image02"/>
                                <img src="images/3.jpg" alt="image03"/>
                                <img src="images/4.jpg" alt="image04"/>
                                <img src="images/5.jpg" alt="image05"/>
                                <img src="images/6.jpg" alt="image06"/>
                            </div>
                        </li>
                        <li>
                            <a href="#">Admissions<span class="st-arrow">Open or Close</span></a>
                            <div class="st-content">
                                <p>Separated they live in Bookmarksgrove right at the coast of...

CSS

/* General Demo Style */
body{
    background:#f7f7f7 url(../images/pattern.png) repeat top left;
    color:#000;
    font-family: 'Arial Narrow', Arial, sans-serif;
    font-size:13px;
    min-height:2000px;
}
a{
    color:#000;
    text-decoration:none;
}
.clr{
    clear:both;
}
h1{
    padding:20px;
    font-size:28px;
    color:#333;
    font-family: 'Josefin Slab',Georgia, serif;
    font-weight:400;
    text-align:center;
    text-shadow:1px 1px 1px #fff;
}
h1 span{
    font-size:18px;
    color:#1693eb;
}
.more{
    font-family: 'Josefin Slab',Georgia, serif;
    margin:0 auto;
    text-align:center;
    color:#ddd;
    font-size:15px;
    color:#444;
}
.more p{
    display:block;
    margin:10px;
}
.more a{
    color:#666;
    white-space: nowrap;
    font-weight:bold;
    background:#fff;
    padding:1px 6px;
    -webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);
    box-shadow:1px 1px 2px rgba(0,0,0,0.2);
}
.more a.current,
.more a.current:hover{
    color:#fff;
    background:#000;
}
.more a:hover{
    background-color:#1693eb;
    color:#fff;
}
/* Header Style */
.header{
    line-height:24px;
    font-size:11px;
    background:#000;
    opacity:0.9;
    text-transform:uppercase;
    z-index:4;
    -moz-box-shadow:1px 0px 2px #000;
    -webkit-box-shadow:1px 0px 2px #000;
    box-shadow:1px 0px 2px #000;
}
.header a{
    padding:0px 10px;
    letter-spacing:1px;
    color:#ddd;
    display:block;
    float:left;
}
.header a:hover{
    color:#fff;
}
.header span.right{
    float:right;
}
.header span.right a{
    float:none;
    display:inline;
}


/* Flexible Slide-to-top Accordion Style*/
.wrapper{
    width:90%;
    max-width:800px;
    margin:30px auto;
}
.st-accordion{
    width:100%;
    min-width:270px;
    margin: 0 auto;
}
.st-accordion ul li{
    height: 100px;
    border-bottom: 1px solid #c7deef;
    border-top:1px solid #fff;
    overflow: hidden;
}
.st-accordion ul li:first-child{
   ...

JavaScript

$('#st-accordion').accordion();