JSFiddle - React, Tailwind, and code Playground

HTML

<div>
<input type="checkbox" id="isevent" runat="server" class="rcorners" onclick="javascript:f1()" />&nbsp;Staffed Event?
</div>
<div>
<input type="text" id="eventname" class="rcorners input" runat="server" placeholder="Event Name" style="display:none;" maxlength="128" />
</div>
<div>
<input type="text" id="campaign" runat="server" class="rcorners input" placeholder="Campaign" maxlength="64" style="display:none;" />
</div>
<script type="text/javascript">
        function f1() {
            var mycheck = document.getElementById("isevent").checked;
            var myevent = document.getElementById("eventname");
            var mycampaign = document.getElementById("campaign");
            
            if (mycheck === true) {
              
                    myevent.style.display = 'block';
                    mycampaign.style.display = 'block';
                alert("Myevent's visibility is " + myevent.style.display);

            } else {
                    myevent.style.display = 'none';
                    mycampaign.style.display = 'none';

            }
}
</script>