JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="item">
        <p>item 1</p>
        <div class="close">x</div>
    </div>
    <div class="item">
        <p>item 2</p>
        <div class="close">x</div>
    </div>
    <div class="item">
        <p>item 3</p>
        <div class="close">x</div>
    </div>
    <div class="item border-bottom">
        <p>item 4</p>
        <div class="close">x</div>
    </div>
</div>

CSS

*{
    margin:0 auto;
    padding:0;
    box-sizing:border-box;
    font-family:sans-serif;
    transition:all .1s linear
}

.wrapper{
    padding:20px;
    width:800px
}

.item{

    padding:15px;
    border:1px solid #CCC;
    border-bottom:none;
    width:100%;
    float:left
    display:block;
    position: relative;
}

.close{
    display:none;
    position: absolute;
    top:50%;
    right:10px;
    width:20px;
    height:20px;
    background-color:red;
    border-radius:100%;
    font-size: 0.8em;
    color:#fff;
    line-height: 20px;
    text-align:center;
    font-weight:bold;
    cursor:pointer;
    margin-top:-10px;
  }
  
.item:hover .close{
    display:block;
    transition: all 0.8s;
  }
 .item:hover{
    background-color:#f6b32f;
    border:1px solid #f6b32f;
    transition: all 0.8s;
    border-bottom:none;
  }
  .border-bottom{
    border-bottom:1px solid #CCC;
  }