JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<p class="news1">something something</p>
<ul class="readmore">
   <li><a href="#">read more</a></li>
</ul>
<br>
</div>
</body>

CSS

p.news1 {
	color: #f9a724;
	text-align:left;
	border-style: solid;
   border-color: #f9a724;
	word-wrap: break-word;
	line-height: 100px;
	margin-right:50px;
	padding:10px;
	margin-left:50px;
	font-family:Lato-Light;
	}

ul.readmore li a{
      display: block;
	  position:absolute;
		transition: .4s ease;
       padding: 8px 25px;
		color: #000000;
		background: #f9a724;
        text-decoration: none;
    }
    ul li a:hover{
      color: #f9a724;
		background: #000000;    
    }
    ul {
        position: absolute;
        width: 100%;
        top: 85px;
        left: 35px;    
    }