JSFiddle - React, Tailwind, and code Playground

by mohammad

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>



    <style>
        .container1{
            width:100%;
            height: 200px;
            background-color: red;
            overflow: auto;
            margin-bottom: 50px;
        }
        .container1 > .child1{
            width: 100%;
            height: 200vh;
            background-color: greenyellow;
        }
        .container1 > .child2{
            width: 100%;
            height: 20%;
            background-color: #c68dff;
        }
        .container1 > .child3{
            width: 100%;
            height: 20%;
            background-color: #4a4a4a;
        }



        .container2{
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;


            width:100%;
            height: 200px; /* ارت*/
            background-color: red;
            overflow: auto;
            margin-bottom: 50px;

        }
        .container2 > .child1{
            width: 100%;
            height: 200vh;
            background-color: greenyellow;
        }
        .container2 > .child2{
            width: 100%;
            height: 20%;
            background-color: #c68dff;
        }
        .container2 > .child3{
            width: 100%;
            height: 20%;
            background-color: #4a4a4a;
        }


    </style>


</head>
<body>



<div class="container1">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
</div>




<div class="container2">
    <div class="child1"></div>
    <div class="child2"></div>
    <div class="child3"></div>
</div>




</body>
</html>