JSFiddle - React, Tailwind, and code Playground

by csshat

HTML

<div class="container">

    <div class="element element_1">
        This is a placeholder
    </div>
    
    <div class="element element_2">        
        HTTP servers? I don’t GET you.
    </div>
    
    <div class="element element_3">                
        Visual Idiot is the 
    </div>
    
    <div class="element element_4">                        
        What’s the time?
    </div>
    
    <div class="element element_5">                                
        <div>
            <span></span>
        </div>
    </div>
    
    <div class="element element_6">                                
        Submit button
    </div>
    
    <div class="element element_7">                                        
        Submit button
    </div>
    
    <div class="element element_8">                                                
        Submit button
    </div>
    
    <div class="element element_9">                                                        
        Submit button
    </div>
    
    <div class="element element_10">                                                                
        Submit button
    </div>
    
    <div class="element element_11">                                                                        
        Submit button
    </div>
    
    <div class="element element_12">
        Drag and drop files here to upload
    </div>
    
    <div class="element element_13">        
        I like my eggs cooked.
    </div>
    
      <div class="element element_14">        
          <div>ON</div>
    </div>
    
    <div class="element element_15">        
          <div>OFF</div>
    </div>
    
    <div class="element element_16">
        
    </div>
    
    <div class="element element_17">
        
    </div>
    
     <div class="element element_18">
        
    </div>
    
    <div class="element element_19">
        
    </div>
    
     <div class="element element_20">
        
    </div>
    
    <div class="element...

CSS

body{
    background-color: #f6f9fd; /* layer fill content */    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PHJhZGlhbEdyYWRpZW50IGlkPSJoYXQwIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIiA+CjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlZGYzZmIiIHN0b3Atb3BhY2l0eT0iMSIvPgo8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZGZkZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgo8L3JhZGlhbEdyYWRpZW50PgoKPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNoYXQwKSIgLz4KPC9zdmc+); /* gradient fill */
    background-image: -moz-radial-gradient(center center, circle, #edf3fb 0%, #fdfdff 100%); /* gradient fill */
    background-image: -o-radial-gradient(center center, 75% 75%, #edf3fb 0%, #fdfdff 100%); /* gradient fill */
    background-image: -webkit-radial-gradient(center center, 75% 75%, #edf3fb 0%, #fdfdff 100%); /* gradient fill */
    background-image: radial-gradient(center center, 75% 75%, #edf3fb 0%, #fdfdff 100%); /* gradient fill */
    -webkit-user-select:none;
}
.container{
    position: absolute;
    margin: -280px 0 0 -245px;
    width: 530px;
    height:490px;
    padding: 10px;
    font-family: "Helvetica Neue", sans-serif;
    font-size: 13px;
    top:50%;
    left:50%;
}
.element{
    position:absolute;
}
.element_1{
    width: 253px;
    height: 33px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -moz-box-shadow:
    0px 2px 0px rgba(255,255,255,0.1),
    inset 0px 1px 1px rgba(0,0,0,0.1),
    0px 0px 0px 1px rgba(8,25,45,0.25);
    -webkit-box-shadow:
        0px 2px 0px rgba(255,255,255,0.1),
        inset 0px 1px 1px rgba(0,0,0,0.1),
        0px 0px 0px 1px rgba(8,25,45,0.25);
    box-shadow:
       ...