JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css2?family=Lobster&family=Lora&family=Open+Sans&family=Roboto&family=Roboto+Slab&family=Yeseva+One&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles/index.css">
    <title>Document</title>
</head>
<body>
    <div class="wrap">
        <div class="first">
            <h1>Заголовок первого уровня</h1>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos perferendis commodi nobis architecto optio minima magni ipsam ipsum ex accusamus.</p>
            <button type="button">Перейти на сайт</button>
        </div>
    
        <div class="second">

        </div>
    </div>

    
</body>
</html>

SASS

body 
    margin: 0
    font-family: 'Yeseva One', cursive

.wrap
    display: grid
    grid-template-columns: 50% 50%

.first
    background-color: #1f1f21
    h1
        color:#ece8e5
    p   
        color: #d2c2b5
    button
        background-color: #ece8e5
        border: none
        padding: 10px 10px
        border-radius: 10px
    button:hover
        background-color: #d2c2b5
        color: #1f1f21

.second
    padding: 0
    background-image: url('http://i.piccy.info/i9/9eb48565d8888481b3dc229958eb6d89/1589733439/279381/1378760/main.jpg')