JSFiddle - React, Tailwind, and code Playground

by ketanmokariya

HTML

<body>
    <div class="flex-container">
        <div class="flex-item"><img src="http://placehold.it/100x100"/>
            <div class="info-container">
            <p>Field 1</p>
            <p>Field 2</p>
            <p>Field 3</p>
            </div>
        </div>
        <div class="flex-item"><img src="http://placehold.it/100x100">
            <div class="info-container">
            <p>Field 1</p>
            <p>Field 2</p>
            <p>Field 3</p>
            </div>
        </div>
        <div class="flex-item"><img src="http://placehold.it/100x100">
          <span>Text fields will go here</span>
        </div>
        <div class="flex-item"><img src="http://placehold.it/100x100">
          <span>Text fields will go here</span>
        </div>
        <div class="flex-item"><img src="http://placehold.it/100x100">
          <span>Text fields will go here</span>
        </div>
        <div class="flex-item"><img src="http://placehold.it/100x100">
          <span>Text fields will go here</span>
        </div>
        <div class="flex-item"><img src="http://placehold.it/100x100">
          <span>Text fields will go here</span>
        </div>
        <div class="flex-item"><img src="http://placehold.it/100x100">
          <span>Text fields will go here</span>
        </div>
        <div class="flex-item"><img src="http://placehold.it/100x100">
          <span>Text fields will go here</span>
        </div>
    </div>
</body>

CSS

.flex-container {
           display: -webkit-flex;
           display: flex;
           -webkit-flex-direction: row;
           flex-direction: row;
           -webkit-align-items: center;
           align-items: center;
           
           flex-wrap: wrap;
           min-width: 320px;
           max-width: 1220px;
        }
        .flex-item {
        height: 120px;
        width: 300px;
        background-color: #e46119;
        border: 1px solid #626262;
        margin: 3px;
        padding: 10px 0 0 10px;
        }
        
        .info-container{
            display: inline-block;
            vertical-align: top;
            padding: 0 0 0 5px;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .info-container p{
            padding: 0;
            margin: 0 0 10px;
        }