JSFiddle - React, Tailwind, and code Playground

by vijay patel

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: -18px;
        right: 26px;
    border: 9px solid;
    border-color: transparent transparent #ffffff transparent;
        z-index: 99;
}
.minicart-wrapper .ui-dialog .block-minicart:after {
    top: -20px;
    right: 25px;
    border: 10px solid;
    border-color: transparent transparent #e0e0e0 transparent;
}