JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <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-->

</body>

CSS

.index{
    d
    background-image: url("http://www.gettyimages.co.uk/gi-resources/images/Homepage/Category-Creative/UK/UK_Creative_462809583.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}

html, body { height: 100%; width: 100%;}