JSFiddle - React, Tailwind, and code Playground

HTML

<table class="subscription_data_table">
        <tbody><tr class="more_info_header">
		<th colspan="2"><i class="info_icon">i</i> Common Cartridge Info</th> 
	</tr>
        <tr>
            <td class="infoTitle" align="right">Domain</td>
            <td align="left">sims.devbox.com</td>
        </tr>
        <tr>
            <td class="infoTitle" align="right">Consumer Key</td>
            <td id="consumer_key" align="left">mw2RcIS28PXjOA</td>
        </tr>
        <tr>
            <td class="infoTitle" align="right">Consumer Secret</td>
            <td id="consumer_secret" align="left">ylMGByvYYonX22U8Xs9S0vOReftQahFe8g</td>
        </tr>
    </tbody></table>

CSS

.subscription_data_table {
    border: 2px solid #008EE2;
}

.subscription_data_table tr {
    border-bottom: 2px solid #008EE2;
}

.subscription_data_table td {
    padding: 4px; 
}

.subscription_data_table th {
    background-color: #008EE2;
    padding: 4px;
}

.infoTitle {
    background-color: #008EE2;
    font-weight: bold;
    color: #fff;
}

.info_icon {
    font-style: italic !important;
    color: #008EE2;
    padding: 5px 10px;
    display: inline-block;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    -moz-box-shadow: 0px 0px 2px #fff;
    -webkit-box-shadow: 0px 0px 2px #fff;
    box-shadow: 0px 0px 2px #fff;
    background-color: #ffffff;
}