JSFiddle - React, Tailwind, and code Playground

by BramVanroy

HTML

<script>
    function ShowWindow(el) {
        $("#UserPageMain").fadeOut(150);
        $(el).css("display", "inline").animate({
            "opacity": 1
        }, 150);
    }
</script>
<div id="UserPageMain" style="margin-top:50px;" class="textfont">
    <p style="margin-top:140px; font-size:50px;">דף לקוח</p>
    <table class="userpagetable">
        <tr>
            <td class="userpageimgtd">
                <center class="Logintablefont">
                    <input type="button" class="userpagebutton" value="הקופונים שלי" />
                </center>
            </td>
            <td class="userpageinfotd" style="border-top:2px solid lightblue;">
                <center></center>
            </td>
        </tr>
        <tr>
            <td class="userpageimgtd">
                <center class="Logintablefont">
                    <input type="button" class="userpagebutton" value="ההזמנות שלי" />
                </center>
            </td>
            <td class="userpageinfotd">
                <center></center>
            </td>
        </tr>
        <tr>
            <td class="userpageimgtd">
                <center class="Logintablefont">
                    <input type="button" class="userpagebutton" value="click me" onclick="ShowWindow('#EditDetails');" />
                </center>
            </td>
            <td class="userpageinfotd">
                <center></center>
            </td>
        </tr>
        <tr>
            <td class="userpageimgtd" style="border-bottom:2px solid lightblue">
                <center class="Logintablefont">
                    <input type="button" class="userpagebutton" value="פנייה לשירות לקוחות" />
                </center>
            </td>
            <td class="userpageinfotd" style="border-bottom:2px solid lightblue; border-top:none;">
                <center>Look, now I have content and I have a border!</center>
            </td>
        </tr>
        <tr>
            <td></td>
            <td></td>
       ...

CSS

div.UserPageWindows {
    display:none;
    opacity:0;
    min-width:80%;
    margin-top:190px;
    border: solid;
    border-top:none;
    border-bottom:5px;
}

JavaScript

$(document).ready(function () {
    // For JSFiddle purposes
    $("a").click(function (e) {
        e.preventDefault();
    });
});