JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="modal">
<div style="word-wrap:break-word; padding-top:4px; padding-left:14px" ng-if="showWelcomeMessage === false ? true : false">
    <p class="wizard-question">
       <span style="font-family:'MetricWeb-Semibold'">Question {{currentQuestionIndex+1}}:</span>&nbsp;&nbsp;{{currentQuestionObject.question}}
    </p>

    <ul style="padding-left:30px;">
        <div>
            <li ng-repeat="query in currentQuestionObject.choices" style="padding-bottom:5px;">
                <input class="TWInputField" name="{{currentQuestionObject.inputType}}" 
                   type="{{currentQuestionObject.inputType}}" id="{{query.id}}" 
                   ng-model="query.value" ng-change="changeOnSelection(query.value, query.id);choicesSelected = query.value"
                   ng-value="true">
                <label for="{{query.id}}" style="font-family:'MetricWeb-Regular';font-size:17px;cursor:pointer">&nbsp;&nbsp;{{query.answer}}</label>
            </li>
             <p class="msg-required" ng-show="disableWizardFeatures()">Input is required.</p>
        </div>
    </ul>

    <div style="float:right">
        <div class="carousel-wizard-btn-container">
            <div class="carousel-wizard-buttons" ng-click="wizardPrevious()" ng-hide="currentQuestionIndex == 0">Previous</div>
            <div class="carousel-wizard-buttons" ng-click="disableWizardFeatures() || wizardNext()" ng-hide="currentQuestionIndex == wizardQuestionSet.length - 1" ng-disabled="showWelcomeMessage === true ? false : disableWizardFeatures()">Next</div>
            <div class="carousel-wizard-buttons" ng-click="disableWizardFeatures() || showResults() " ng-show="currentQuestionIndex == wizardQuestionSet.length - 1" ng-disabled="disableWizardFeatures()">Finish</div>
        </div>
    </div>

</div>
</div>

CSS

body{
  background:gray;
}
div.carousel-wizard-btn-container {
    /*right:5%;*/
    bottom:3%;
    position:relative; /* It's "relative" because "absolute" makes it overlap with the content text.*/
}

div.carousel-wizard-buttons {
    background-color:#01a982;
    color:#fff;
    font-weight:bold;
    text-align:center;
    width:110px;
    display:inline-block;
    padding-top:8px;
    padding-bottom:8px;
    bottom:100px;
    font-family:'MetricWeb-Bold';
    cursor:pointer;
}
.modal{
  display:inline-block;
  width:600px;
  position:relative;
  background-color:#fff;
}
.carousel-wizard-btn-container{
  margin-right:10px;
  margin-bottom:10px;
}