JSFiddle - React, Tailwind, and code Playground

HTML

<p class="banner">Webplatform.org</p>

CSS

.banner {
    position: relative;
    margin: 0px auto;
    width: 90%; /* fallback for browsers without support for calc() */
    width: -webkit-calc(100% - 80px);  /* WebKit 536.3 (Chrome 19) and above, experimental */
    width: calc(100% - 80px);  /* final CSS3 compliant implementation; Firefox 16 and IE 9, and above */
    border: solid black 1px;
    
    box-shadow: 5px 5px #999;
    margin-top: 40px;
    padding: 10px;
    text-align: center;
    
	transition:width 1.00s ease-in-out;
    
}
.banner:hover {
    width: calc(100% - 200px)
    border-radius: 10px 10px 10px 10px;;
}