JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.1/semantic.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.0.1/semantic.js"></script>
<div class="ui stretched padded grid">
    

  <div class="sixteen wide mobile eight wide tablet four wide computer column ">
      
      <div class="ui inverted basic segment">
          
  <!--          <div class="ui active dimmer">
               <div class="ui loader"></div>
             </div> -->
          <br/>
          <br/>
         <i class="ui  large circular icon file"></i><br/>
          <h1 class="ui inverted header">Social Media for Managers</h1>
          <div class="ui hidden divider"></div>
          <p></p>
          
          <div class="ui hidden divider"></div>
          <div class="ui hidden divider"></div>
          <div class="ui hidden divider"></div>
          <div class="ui transparent  bottom attached inverted label">
              
              
              <div class="ui compact inverted text  menu">
                  <div class="item">
                      <i class="ui icon eye"></i>
                      100
                  </div>
                  
                  <div class="item">
                      <i class="ui icon heart"></i>67
                  </div>
              </div>
              
              <div class="ui compact right floated inverted text menu">
                  <div class="ui right dropdown item">
                        
                      <a href="#" class="ui">&bull; &bull; &bull;</a>
                          <div class="ui menu">
                          <div class="item">Applications</div>
                              <div class="item">International Students</div>
                              <div class="item">Scholarships</div>
                          </div>
                      </div>
              </div>
          </div>
      </div>
</div>
    
      <div class="sixteen wide mobile...

CSS

.column .basic.segment {
    background: url(http://www.lorempixel.com/900/900) center center;
    border-radius: 0;
}
.basic.segment {
    display:none  ;
}
.ui.label {
    background:rgba(0,0,0,0.5); 
    border-radius: 0 !important;
}

JavaScript

$('.ui.dropdown')
  .dropdown()
;

$('.basic.segment').each(function(){
    $(this).hide()
  .transition('horizontal flip in')
})
;