JSFiddle - React, Tailwind, and code Playground
HTML
<div class="minicart-wrapper">
<a class="action showcart active" href="http://magentomiss.local/checkout/cart/" data-bind="scope: 'minicart_content'">
<span class="counter qty" data-bind="css: { empty: !!getCartParam('summary_count') == false }, blockLoader: isLoading">
</span>
</a>
<div class="ui-dialog ">
<div class="block block-minicart ui-dialog-content ui-widget-content">
<div class="">
sdfgsdgsgsdg
</div>
</div>
</div>
</div>
CSS
.minicart-wrapper {
position: relative;
display: inline-block;
margin: 0 auto;
margin-left: 400px;
}
.minicart-wrapper .action.showcart {
margin-right: 0;
width: 40px;
height: 40px;
background-color: #3b1060;
border-radius: 50%;
display: inline-block;
text-decoration: none;
}
.minicart-wrapper .ui-dialog .block-minicart {
width: 332px;
border-radius: 5px;
box-shadow: 0 2px 7px 0 rgba(122, 119, 128, 0.3);
background-color: #ffffff;
border: 1px solid #e0e0e0;
padding: 0;
margin-top: -3px;
right: -15px;
position: absolute;
top: 100%;
z-index: 101;
min-width: 100%;
padding: 20px;
}
.minicart-wrapper .action.showcart .text {
display: none;
}
.minicart-wrapper .block-minicart {
}
.minicart-wrapper .block-minicart:before, .minicart-wrapper .block-minicart:after {
border-bottom-style: solid;
content: '';
display: block;
height: 0;
position: absolute;
width: 0;
}
.minicart-wrapper .ui-dialog .block-minicart:before {
top: -9px;
right: 25px;
border: 1px solid;
border-color: #c1c1c1 #ffffff #ffffff #c1c1c1;
z-index: 1;
width: 17px;
height: 17px;
border-radius: 5px;
transform: rotateZ(45deg);
background: white;
}
.minicart-wrapper .ui-dialog .block-minicart:after {
top: -20px;
right: 25px;
border: 10px solid;
border-color: transparent transparent #e0e0e0 transparent;
}