JSFiddle - React, Tailwind, and code Playground

HTML

<div id="home-dir-left">
    <div class="custom-widget-head">
        <h3><span class="custom-section-head"> Find the Best Vendor</span></h3>
        <a href="/login/" class="btn tools-login">Login / Register</a>
    </div>
    <div class="homecat-columns">
        <div class="span2 directory-categories">
            
            <div class="custom-widget-head"style="clear:both;">
                <h4><span class="dircat-head"> 
		Fashion</span></h4>

            </div>	<span class="span-dircat">

			<ul>
				<li><a href="/listings/category/bridal-accessories/">Bridal Accessories</a>
				
				
			</li></ul>
		</span>

        </div>
    </div>
</div>

CSS

.custom-section-head {
background-color: #ec008c;
-moz-box-shadow: 0 0 3px #000;
-webkit-box-shadow: 0 0 3px #000;
box-shadow: 0 0 3px #000;
color: #FFFFFF;
margin: 0 auto;
outline: 1px dashed #efc4dd;
outline-offset: -5px;
padding: 10px;
display: block;
    float: left;
}

.tools-login {
float: right;
font-size: 14px;
padding: 10px 10px 5px 5px;
}