JSFiddle - React, Tailwind, and code Playground

by Petar Pilipovic

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
      <div class="row" id="app">
         <div class=" col-xs-12 col-sm-12 col-md-8 col-md-offset-2 col-lg-12">
                <ul class="nav nav-pills">
                  <li role="presentation"><a id="anime1" href="#">Grouting</a></li>
                  <li role="presentation"><a id="anime2" href="#">Ground Improvements</a></li>
                  <li role="presentation"><a id="anime3" href="#">Earth Retention</a></li>
                  <li role="presentation"><a id="anime4" href="#">Structural Support</a></li>
                  <li role="presentation"><a id="anime5" href="#">Additional Technologies</a></li>
                </ul>
         </div>
     </div>
        
         <div class="row">
             <p style="padding: 10px;"></p>
         </div>

            <div class="row">
               <div id="col1" class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2">
                   <div class="thumbnail">
                      <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt="">
                      <div class="caption">
                        <h3 class="text-center">Text title, label, etc</h3>  
                        <p class="text-center">descritpion here</p>
                        <p><a href="#" class="btn btn-md btn-primary" role="button">Button</a></p>
                      </div><!--/ caption-end -->
                   </div><!--/ thumbnail-end -->
                </div>

                <div id="col2" class="columns col-xs-2 col-sm-2 col-md-2 col-lg-2">
                   <div class="thumbnail">
                      <img class="img-thumbnail img-responsive" src="http://placehold.it/140x100" alt="">
                      <div class="caption">
                        <h3 class="text-center">Text title, label, etc</h3>  
          ...

JavaScript

// Buidling Thrustdrilling animation, beginning with JQuery
$(function(){

    $('#anime1').click(function(){
        $('.column').each(function(){
            $( this ).hide( 500 );
        });
        $('.columns').each(function(){
            $( this ).show( 500 );
        });
        $('#col1 p:first').text('Grouting text will be displayed here!');
        $('#col2 p:first').text('Grouting text will be displayed here!');
        $('#col3 p:first').text('Grouting text will be displayed here!');
        $('#col4 p:first').text('Grouting text will be displayed here!');
        $('#col5 p:first').text('Grouting text will be displayed here!');
        $('#col6 p:first').text('Grouting text will be displayed here!');
    });

    $('#anime2').click(function(){
        $('.columns').hide( 500 );
        $('.column').hide( 500 );
    });
    $('#anime2').click(function(){
        $('.col4').show( 500 );
        $('#col4')
           .find('h3')
           .text('Ground Improvements')
           .find('p')
           .text('Ground Improvements text will be displayed here!');
    });

    $('#anime3').click(function(){
        $('.column').each(function(){
            $( this ).show( 500 );
        });
        $('.columns').each(function(){
            $( this ).show( 500 );
        });
        $('#col1 p:first').text('Earth Retention text will be displayed here!');
        $('#col2 p:first').text('Earth Retention text will be displayed here!');
        $('#col3 p:first').text('Earth Retention text will be displayed here!');
        $('#col4 p:first').text('Earth Retention text will be displayed here!');
        $('#col5 p:first').text('Earth Retention text will be displayed here!');
        $('#col6 p:first').text('Earth Retention text will be displayed here!');
        $('#col7 p:first').text('Earth Retention text will be displayed here!');
        $('#col8').hide( 500 );
    });

    $('#anime4').click(function(){
        $('.column').each(function(){
            $(...