JSFiddle - React, Tailwind, and code Playground

by haba713

HTML

<!DOCTYPE html>
<html lang="fi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Divien jakaminen</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="outer-div">
        <div class="inner-div top"></div>
        <div class="inner-div bottom"></div>
    </div>
     <div class="outer-div">
        <div class="inner-div top"></div>
        <div class="inner-div bottom"></div>
    </div>
</body>
</html>

CSS

/* Ulomman div:in tyyli */
.outer-div {
    width: 300px; /* Ulomman div:in leveys */
    height: 300px; /* Ulomman div:in korkeus */
    border: 2px solid black;
    position: relative; /* Varmistetaan, että sisäiset div:t asettuvat suhteessa tähän */
}

/* Yleiset tyylit sisemmille diveille */
.inner-div {
    width: 100%; /* Leveys täsmää ulomman div:in kanssa */

    position: relative;
}

/* Ylempi sisempi div */
.inner-div.top {
    background-color: lightblue;
    height: 40%;
    top: 0;
}

/* Alempi sisempi div */
.inner-div.bottom {
    background-color: lightcoral;
    height: 60%;
    bottom: 0;
}