JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/unsemantic/1.2.3/unsemantic-grid-responsive.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css">
<div class="courses">
    <h1>Courses</h1>
    <div class="courselist">
        <image ID="webcrsebtn" src="https://picsum.photos/300/300" />
        <image ID="reactntivebtn" src="https://picsum.photos/300/300" />
    </div>
</div>

CSS

.courses {
    /*height: 100px;*/
}

.courses h1 {
    width: 100%;
    text-align: center;
    padding-top: 80px;
    padding-bottom: 40px;
    color: #548DD4;
    font-weight: 500;
    font-size: 40px;
    margin-bottom: 50px;
}

.courselist {
    width: 100%;
    height: 300px;
    border: 2px solid red;
}

.courselist #webcrsebtn {
    
    height: 250px;
    width: 250px;
    margin-left: 90px;
    -webkit-box-shadow: 0px 00px 4px #888888;
    -moz-box-shadow: 0px 0px 4px #888888;
    box-shadow: 0px 0px 4px #888888;
    border-radius: 5px;
}

.courselist #webcrsebtn:hover {
    margin-top: 0px;
}

.courselist #reactntivebtn {
    margin-top: 20px;
    height: 250px;
    width: 250px;
    margin-left: 90px;
    -webkit-box-shadow: 0px 00px 4px #888888;
    -moz-box-shadow: 0px 0px 4px #888888;
    box-shadow: 0px 0px 4px #888888;
    border-radius: 5px;
}

/*.courselist #reactntivebtn:hover {
    margin-top: 0px;
}*/