JSFiddle - React, Tailwind, and code Playground

by hardiksondagar

HTML

<section class="sidebar">
    <div class="header"><i class="icon-html5"></i> HTML5</div>
    <div class="content">
        HTML5 is the ubiquitous platform for the web. Whether you're a mobile web developer, an enterprise with specific business needs, or a serious game dev looking to explore the web as a new platform, HTML5 has something for you! Choose your path:
    </div>
 
    <div class="header">CSS3</div>
    <div class="content">
        CSS is used to control the style and layout of Web pages.
        CSS3 is the latest standard for CSS.
        This tutorial teaches you about the new features in CSS3!
    </div>
 
    <div class="header"><i class="icon-android"></i> Android</div>
    <div class="content">
        Android is a Linux-based operating system designed primarily for touchscreen mobile devices such as smartphones and tablet computers.
    </div>
 
 
    <div class="header"><i class="icon-github"></i> Git</div>
    <div class="content">
        Online project hosting using Git. Includes source-code browser, in-line editing, wikis, and ticketing. Free for public open-source code.
    </div>
</section>

CSS

.sidebar {
    font-family: 'Istok Web', sans-serif;
}
 
.header {
    padding: 10px;
     width: 20%; 
     
    color: #333;
    font-size: 1.3em;
    text-shadow: 0 1px 1px #000;
   
     
    transition: all 0.1s ease-in;
    margin-top: 2px;
    border-bottom: 3px solid #eee;
     
}
 
.header:hover
{
    
    font-size: 1.5em;
}
.content:first-letter
{
    color:#EA6045;
    font-size: 1.8em;
}
 
.header:first-child {
    border-top: none;
}
 
.content {
    padding: 10px;
    width: 20%; 
    color: #333;
    background: #EEEEEE;
 
   box-shadow: 2px 6px 9px -7px #333;    border-bottom-right-radius: 8px;
   
    
}
 
 
.hide {
    display: none;
}

JavaScript

(function (){
    $('.content').filter(':nth-child(n+4)').addClass('hide');
 
    $('.header').on('mouseenter', function (){
        $(this)
            .next()
                .slideDown(300)
                .siblings('.content')
                    .slideUp(300);
    });
})();