JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="circles-cont">
    <div class="col-sm-4 text-center icon-click">
        <p class="circle">
            <img class="search" src="http://www.clker.com/cliparts/w/N/I/K/O/9/smaller-red-button-th.png">
        </p>
        <p class="thetext">
            <span>Search</span>
            <br/>
            <span>afasfasfa</span>
        </p>
    </div>
    <div class="col-sm-4 text-center icon-click">
        <p class="circle ">
            <img class="conv" src="http://www.clker.com/cliparts/w/N/I/K/O/9/smaller-red-button-th.png">
        </p>
        <p class="thetext">
            <span>asfsfas</span>
            <br/>
            <span>asfasfasf</span>
        </p>
    </div>
    <div class="col-sm-4 text-center icon-click">
        <p class="circle ">
            <img class="local" src="http://www.clker.com/cliparts/w/N/I/K/O/9/smaller-red-button-th.png">
        </p>
        <p class="thetext">
            <span>asfasasf</span>
        </p>
    </div>

CSS

.icon-click:hover img {
    background-color: black;
}