JSFiddle - React, Tailwind, and code Playground

by Lazaro Contreras

HTML

<body>
    <div class="principal">
        <img src="lc.jfif">
        <h1>ARTWORK</h1>
    </div>
    <div class="inferior">
        
        <div class="c">
            <span>Lázaro</span>
        </div>
    </div>

CSS

*{
            margin: 0;
            padding: 0;

        }
        div.principal{
            display: block;
            width: 200px;
            height: 280px;
            margin: 80px auto;
            margin-bottom: 10px;
        }
        div.principal h1{
            text-align: center;
        }
        div.principal img{
            width: 200px;
            border-radius: 100%;
            
        }
        div.inferior{
            display: block;
            width: 100%;
            height: 300px;
            display: grid;
            grid-template-columns: auto 300px 100px 300px auto;
        }
        div.inferior div.l, div.inferior div.c{
            display: inline-block;
            width: 300px;
            height: 300px;
            text-align: center;
            background: #75b7e6;
            border-radius: 30px;
        }

        div.inferior div.c{
            grid-column: 2/3;
            grid-row: 1;
        }

        div.inferior div.l{
            grid-column: 4/5;
            grid-row: 1;
        }

        div.inferior span{
            font-family: Arial, Helvetica, sans-serif;
        }