JSFiddle - React, Tailwind, and code Playground

by mgoetzke

HTML

BEFORE

<div class="outer">
    <div class="design">
        <div class="design-template">
            ABC <span class='s'>test</span> sadsads<span class='larger'>LARGER?</span> asdh asjkk hsdkj fhksdjfh sfh sdkjfhsdksdf sdfsdf sdf sd fsd fsd fsdfsdfsdf ds fsdjfh sdkfjhsdf kjdhf 
        </div>
    </div>
</div>

AFTER

CSS

.outer {
    border: solid 1px red;
    display: block;
    position: relative;
}

.design {
    display: inline;
    border: solid 1px blue;
}

.design-template {
    display: inline;
    border: solid 1px cyan;
    position: relative;   
}

.larger{
    font-size: 40px;
  
  
    
}

.s {
    width:200px;
    height:100px;
    display: inline-block;
    border: 1px dashed green;
}