JSFiddle - React, Tailwind, and code Playground

by hardiksondagar

HTML

<script src="http://fonts.googleapis.com/css?family=Istok+Web"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
 <body>
        <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"><i class="icon-css3"></i> 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>

       
    </body>

CSS

.sidebar {
    font-family: 'Istok Web', sans-serif;
}

.header {
    padding: 10px;
    width: 40%;
    
    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: 40%;
    color: #333;
    background: #EEEEEE;

   box-shadow: 2px 6px 9px -7px #333;    border-bottom-right-radius: 8px;
  
   
}

p {
    padding: 0px;
    padding-left: 5px;
    margin: 0px;
}

.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);
            
    }); 
})();