JSFiddle - React, Tailwind, and code Playground

by vinishanto

HTML

<div id="ModalEmail" class="detailModalContainer">
<div class="detailModal">
    <div class="modalBoxHeader">
        <h4 translate="EMAIL"></h4>
        <div data-ng-click="$ctrl.close()">
            <span class="icon ti-close"></span>
        </div>
    </div>
    <div class="modalBody">
        <div class="step">


            <h4 data-translate="CHOOSE_TEMPLATE"></h4>
            <div class="template-list">
            <div class="template-item" data-ng-repeat="template in $ctrl.emailTemplates" data-ng-class="{ active: template === $ctrl.selectedTemplate }">
                <div class="template-info">
                    <span>{{template.title}}</span>
                    <span class="ti-check"></span>
                </div>
                <div class="use-template" data-ng-click="$ctrl.selectTemplate(template)" translate="USE_TEMPLATE"></div>
                <img class="template-preview" data-ng-src="data:image/jpeg;base64,{{template.preview}}" />
            </div><br /><br /></div>
            <span data-translate="CHOOSE_TEMPLATE_ERROR" class="labelPhoto" data-ng-class="{ labelShow: $ctrl.error }"></span><br /><br />
            <span data-translate="NO_TEMPLATES_AVAILABLE" class="labelPhoto" data-ng-class="{ labelShow: $ctrl.emailTemplates.length === 0 }"></span><br /><br />


            <div >
             <button class="btn btn-template customize" type="button" data-ng-click="$ctrl.goToEdit()"><span data-translate="GO_EDIT"></span> <span class="ti-pencil"></span></button>
            </div>
        </div>
    </div>
</div>