JSFiddle - React, Tailwind, and code Playground

by Luis Martin

HTML

<textarea id="css">.rmvf-passwordSecurity__advice--done[_ngcontent-c28], .rmvf-passwordSecurity__check--done[_ngcontent-c28] {
            color: #029B1B!important;
            display: list-item!important;
            list-style-position: inside!important;
            font-weight: bold!important;
        }

        .rmvf-passwordSecurity__tick--visible[_ngcontent-c28] {
            opacity: 1!important;
            position: relative !important;
            top: -10px!important;
            left: 8px!important;
        }

        svg.vfes-form__alert-icon.icon{
            border-radius: 20px!important;
            border: 1px solid #029b02!important;
            background-color: #029b02!important;
            color: white!important;
        }

        .rmvf-passwordSecurity__tick[_ngcontent-c28] svg[_ngcontent-c28] {
            color: white!important;
        }

        .rmvf-passwordSecurity__advice,.rmvf-passwordSecurity__check{
            display: list-item!important;
            list-style-position: inside!important;
            font-weight: bold!important;
        }

        .rmvf-passwordSecurity__check[_ngcontent-c28] {
            max-width: 24rem!important;
        }

        .vfes-form__alert-icon {
            height: 26px!important;
            width: 26px!important;
        }</textarea>
        
        <input type="button" value="Convert">

CSS

textarea{
  width: 50%;
  height: 300px;
  display: block;
}

JavaScript

$(document).on("click", "input", function(){

$("#css").val("<style>\n"+ $("#css").val().replace(/(\n)/g, "\\$1") + "\\" + "\n" + "</style>")

})