JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<a tabindex="0" data-container="body" data-toggle="popover" data-trigger="focus" data-placement="bottom"  title="User Details" data-content="<div class='row'>
<img src='https://pbs.twimg.com/profile_images/2161227700/twitter_logo.jpg' class='profile-pic-big'>
<div class='leftContent'>Login ID</div><div class='rightContent'>Daniel</div></div>
<div class='row'><div class='leftContent'>Name</div><div class='rightContent'>Daniel Forbes</div></div>
<div class='row'><div class='leftContent'>Status</div><div class='rightContent'>Connected</div></div>
<div class='row'><div class='leftContent'>Phone</div><div class='rightContent'>0888888888</div></div>
<div class='row'><div class='leftContent'>Location</div><div class='rightContent'>London</div></div>
<div class='row'><div class='leftContent'>Time Zone</div><div class='rightContent'>GMT</div></div>
<div class='top10'></div>
<a href='mailto:[email protected]'><button id='button1id' name='button1id' class='btn btn-sm btn-default'>Send Email</button></a><button id='button1id' name='button1id' class='btn btn-sm btn-primary'>Send Message</button>">
    Daniel Forbes</a>






















<!--<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

<button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom"  title="User Details" data-content="<div class='row'><div class='leftContent'>Login ID</div><div class='rightContent'>Daniel</div></div>
<div class='row'><div class='leftContent'>Name</div><div class='rightContent'>Daniel Forbes</div></div>
<div class='row'><div class='leftContent'>Status</div><div class='rightContent'>Connected</div></div>
<div class='row'><div class='leftContent'>Phone</div><div class='rightContent'>0888888888</div></div>
<div class='row'><div...

CSS

.leftContent{
    width:70px;
    text-align:right;
    margin-right:10px;
    float:left;
    margin-left: 15px;
}
.rightContent{
    font-weight:700;
}
.popover-content{
    font-size:13px;
    font-family:Century Gothic;
}
.popover-title{
    font-weight:700;
      font-size: 16px;
}
.row{
    display:block;
}
.top10{
    width:100%;
    height:10px;
}
a{
    cursor:pointer;
}
#button1id{
    margin-right:5px;
}
.profile-pic-big {
    display:block;
    margin:0 auto;
  width: 80px;
  height: 80px;
  -webkit-border-radius: 40px;
  -moz-border-radius: 40px;
  border-radius: 40px;
  margin-bottom: 15px;
  border: 5px solid rgba(163, 163, 163, 0.24);
}

JavaScript

$(function () {
  $('[data-toggle="popover"]').popover({html: true})
})