JSFiddle - React, Tailwind, and code Playground

by Mustafa Kaba

HTML

<html>
    
    <head>
        <style>
            .gec {
                height: 300px;
                position: absolute;
                top: 100px;
                left: 370px;
                margin: 20 auto;
                text-align: justify;
                padding: 50px;
                border-radius: 20px;
                width: 300px;
                background: linear-gradient(to bottom right, white, gray);
                box-shadow: 20px 20px 30px white;
                z-index: 1;
            }
            h3 {
                text-shadow: 5px 5px 5px #888888;
            }
            body {
                background-color: black;
            }
            .resim {
                position: absolute;
                top: 170px;
                background-repeat: no-repeat;
                z-index: 0;
            }
            .resim2 {
                position: absolute;
                top: 170px;
                right: 0px;
                background-repeat: no-repeat;
                z-index: 0;
            }
        </style>
    </head>
    
    <body>
        <div class="resim">
            <img src="resSol.jpg" width="300px">
        </div>
        <div class="resim2">
            <img src="resSag.jpg" width="300px">
        </div>
        <div class="gec">
            <br>
             <h3> İSTİKLAL MARŞI</h3> 
            <p>Korkma, sönmez bu şafaklarda yüzen al sancak;</br>Sönmeden yurdumun üstünde tüten en son ocak.</br>O benim milletimin yıldızıdır, parlayacak;</br>O benimdir, o benim milletimindir ancak.</br>
            </p>
            <p>Çatma, kurban olayım, çehrene ey nazlı hilal!</br>Kahraman ırkıma bir gül... Ne bu şiddet, bu celal?</br>Sana olmaz dökülen kanlarımız sonra helal;</br>Hakkıdır, Hakk'a tapan, milletimin istiklal.</br>
            </p>
        </div>
    </body>

</html>

CSS

.gec {
    height: 300px;
    position: absolute;
    top: 100px;
    left: 370px;
    margin: 20 auto;
    text-align: justify;
    padding: 50px;
    border-radius: 20px;
    width: 300px;
    background: linear-gradient(to bottom right, white, gray);
    box-shadow: 20px 20px 30px white;
    z-index: 1;
}
h3 {
    text-shadow: 5px 5px 5px #888888;
}
body {
    background-color: black;
}
.resim {
    position: absolute;
    top: 170px;
    background-repeat: no-repeat;
    z-index: 0;
}
.resim2 {
    position: absolute;
    top: 170px;
    right: 0px;
    background-repeat: no-repeat;
    z-index: 0;
}