JSFiddle - React, Tailwind, and code Playground

by Mustafa Oeztuerk

HTML

<div class="tb-panel">
  <div class="tb-tabs org">
    <a class="tab1">Status</a>
    <a class="tab2">Photo</a>
    <a class="tab3">Video</a>
    <a class="tab4">Link</a>
    <span></span>
  </div>
  <div class="tb-content">
    <div class="ct-tab1">
      <form>
      <textarea  name="update" id="update" placeholder="Ne düşünüyorsun?" class="content" ></textarea>
        <div id="button_hide">
          <div class="security-share">
            <a href="#" class="dropdown-toggle" title="menu">Menu</a>
            <ul class="secret_options">
              <li><a href="#">Herkes</a></li>
              <li><a href="#">Sadece Arkadaşlarım</a></li>
              <li><a href="#">Ailem</a></li>
              <li><a href="#">Çevrem</a></li>
              <li><a href="#">Yakın arkadaşlar</a></li>   
            </ul>
            
          </div>
         <div class="shr">
                <input type="submit" id="button" value="Paylaş" />
                <input type="submit" id="cancel" value="İptal" />
                </div>
        
      </form>
        </div>
    </div>
    <div class="ct-tab2">
      <form method="POST">
        <div class="multifileinf">
          <textarea  name="update" id="update" placeholder="Fotoğraf hakkında bişeyler yaz..." class="file-inf-wrap" ></textarea>
        </div>
        <div class="wdrag-drop_video-content">
        Fotoğrafı Buraya SÜRÜKLE / BIRAK
      </div>
      <div class="dsecbtn">
        <input type="file" class="dosyasec">
      </div>
         <div class="gonder">
           <div class="security-img_share">
           <div class="security-share">
            <a href="#" class="dropdown-toggle" title="menu">Menu</a>
            <ul class="secret_options">
              <li><a href="#">Herkes</a></li>
              <li><a href="#">Sadece Arkadaşlarım</a></li>
              <li><a href="#">Ailem</a></li>
              <li><a href="#">Çevrem</a></li>
              <li><a href="#">Yakın arkadaşlar</a></li>   
           ...

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);

body,
html {
  font-family: 'Open Sans', sans-serif;
  background-color: hsl(0, 0%, 77%);
  font-size: 13px;
}
.tb-panel {
  width: 550px;
  height: 400px;
  background-color: hsl(120, 3%, 94%);
  margin: 30px auto;
  box-shadow: 0 0 2px hsl(0, 0%, 60%);
  overflow: hidden;
}
.tb-tabs {
  background-color: hsl(0, 0%, 100%);
  text-align: left;
  border-bottom: 1px solid hsl(0, 0%, 81%);
}
.tb-tabs a {
  width: 87px;
  display: inline-block;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  margin: 0 -4px -1px 0;
  font-weight: 600;
  color: hsl(0, 0%, 50%);
}
.tb-tabs span {
  width: 0; 
  height: 0; 
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;	
  border-bottom: 9px solid #d8dbdf;
  position: absolute;
  transition: transform .0s;
  transform: translate( -220px, 41px);
}
.tb-tabs span:after {
  display: block;
  content: '';
  width: 0; 
  height: 0; 
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;	
  border-bottom: 8px solid #f4f4f4;
  position: absolute;
  transform: translate(-7px, 1px); 
}
.tb-tabs a.current {
  color: hsl(0, 0%, 0%);
  transition: all .8s;
}
.tb-tabs.org {
  border-color:#d8dbdf;
}
.tb-tabs.org span {
  border-bottom-color:#d8dbdf;
}

.tb-content > div {
  width: 275px;
  height: 350px;
}
.tb-content > div p {
  padding: 10px;
}
span.arr-tab1 {
  transform: translate( -305px, 41px);  

}
span.arr-tab2 {
  transform: translate( -220px, 41px);  
}
span.arr-tab3 {
  transform: translate( -135px, 41px);  
}
span.arr-tab4 {
  transform: translate( -50px, 41px);  
}
/* Other */
.other {
  width: 200px;
  height: 100px;
  background-color: hsl(120, 3%, 94%);
  box-shadow: 0 0 2px hsl(0, 0%, 60%);  
  position: absolute;
  top: 30px; 
  padding: 20px; 
}
.other h1 {
  color: hsl(0, 0%, 10%);
  font-size: 20px;
  font-weight: 400;
  margin: 0;
}
.other .row {
  display: block;
}
textarea {
 ...

JavaScript

$(document).ready(function() {
  $('.tab1').addClass('current');
  $('.tb-tabs > span').addClass('arr-tab1');
  $('.ct-tab2').hide();
  $('.ct-tab3').hide();
  $('.ct-tab4').hide();
  $('.tb-tabs > a').click(function() {
    $('.tb-tabs').find('.current').removeClass('current');
    $(this).addClass('current');
    if($(this).hasClass('tab1')) {
      $('.ct-tab1').fadeIn();
      $('.ct-tab2').hide();
      $('.ct-tab3').hide();
      $('.ct-tab4').hide();
      $('.tb-tabs > span').addClass('arr-tab1').removeClass('arr-tab2').removeClass('arr-tab3').removeClass('arr-tab4');     
    }
    if($(this).hasClass('tab2')) {
      $('.ct-tab1').hide();
      $('.ct-tab2').fadeIn();
      $('.ct-tab3').hide();
      $('.ct-tab4').hide();
      $('.tb-tabs > span').removeClass('arr-tab1').addClass('arr-tab2').removeClass('arr-tab3').removeClass('arr-tab4'); 
    }   
    if($(this).hasClass('tab3')) {
      $('.ct-tab1').hide();
      $('.ct-tab2').hide();
      $('.ct-tab3').fadeIn();
      $('.ct-tab4').hide();
      $('.tb-tabs > span').removeClass('arr-tab1').removeClass('arr-tab2').addClass('arr-tab3').removeClass('arr-tab4'); 
    }
    if($(this).hasClass('tab4')) {
      $('.ct-tab1').hide();
      $('.ct-tab2').hide();
      $('.ct-tab3').hide();
      $('.ct-tab4').fadeIn();
      $('.tb-tabs > span').removeClass('arr-tab1').removeClass('arr-tab2').removeClass('arr-tab3').addClass('arr-tab4'); 
    }
  });

$(function(){
            $(".content").focus(function(){
            $(this).animate({"height": "100px",}, "fast" );
            $("#button_hide").slideDown("fast");
            return false;
            });
             
            $("#cancel").click(function(){
            $(".content").animate({"height": "50px",}, "fast" );
            $("#button_hide").slideUp("fast");
            return false;
            });
            });
 $(function() {
  
// Dropdown toggle
$('.dropdown-toggle').click(function(){
 ...