JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<body>

<div class="main_logo">
    <img src="<?php echo bloginfo('template_url'); ?>/pictures/site_big_logo.png" alt="Picture ERROR">
</div>

<div class="main_menu">
    <ul>
        <li>
            <div class="circle">
                <img class="home_icon" src="<?php echo bloginfo('template_url'); ?>/pictures/home_icon.png" alt="Picture ERROR">
            </div>
        </li>

        <li>
            <div class="circle">
            </div>
        </li>

        <li>
            <div class="circle">
            </div>
        </li>

        <li>
            <div class="circle">
            </div>
        </li>
    </ul>
</div>

</body>

CSS

body {
    background-color: #9AB87A;
}

.main_logo {
    text-align: center;
    padding: 100px;
}

.circle {
    width: 150px;
    height: 150px;
    background: #f8f991;
    border-radius: 75px;
}

.main_menu {
    text-align: center;
}

.main_menu > ul {
    list-style-type: none;
}

.main_menu > ul > li {
    display: inline-block;
    padding: 30px;
}

.main_menu > ul > li > div > img {
    width: 65%;
    height: 65%;
    margin: 20px;
}


.main_page {
    background: #708B75;
    margin: 90px;
    padding: 40px;
}