JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container index">
    <div class="row">
        <div class="buttons">
            <!--learn alphabets button--> <a>
                    <div class="col-3 learn">
                        <p>
                            Learn
                        </p>
                    </div>
                </a>
        </div>
        <!--buttons end here-->
    </div>
    <!--row ends here-->
</div>
<!--container ends here-->

CSS

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
.index {
    background-image: url("http://lorempixel.com/g/500/500");
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}