JSFiddle - React, Tailwind, and code Playground

by Michael Barros

HTML

<!-- <div class="outerDiv">
    <div class="innerDiv">
        <img src="http://www.ie.edu/business/imagenes/icon-social-linkedin.png">
        <p>This is a test</p>
    </div>
    <div class="innerDiv">
        <img src="http://www.ie.edu/business/imagenes/icon-social-linkedin.png">
        <p>This is a test</p>
    </div>
</div> -->
<div class="outer">
   <div class="inner">1</div>
   <div class="inner">2</div>
   <div class="inner">3</div>
   <div class="inner">4</div>
</div>

CSS

/* .outerDiv {
    display: flex;
    background-color: yellow;
    width: auto;
    height: auto;
    vertical-align: middle;
    text-align: center;
}

.innerDiv {
    display: inline-block;
    background-color: red;
    width: 100px;
    height: 100px;
    margin: 20px;
}
 */
 
 
.outer {
    /* display: flex; */
    background-color: yellow;
    width: auto;
    height: auto;
    vertical-align: middle;
    text-align: center;
}

.inner {
  /* position: absolute; */
  /* display: inline-block; */
    background-color: red;
    width: 100px;
    height: 100px;
    margin: 20px;
}