JSFiddle - React, Tailwind, and code Playground

by magicaj

HTML

<form>
    <div class="image-editor">
        <div class="input-container">
            <input type="file" name="image-file" />        
        </div>
        <a href="#" class="image-toggle">Use Image From Web</a>
    </div>
    <div class="image-editor image-from-web">
        <div class="input-container">
            <input type="text" name="image-url" />
        </div>
        <a href="#" class="image-toggle">Upload From Computer</a>
    </div>    
    <input type="submit" />
</form>

CSS

.image-from-web { display:none; }
.input-container { height:24px; padding:0 2px; margin:5px 0; }
input[type="file"] { height:24px; }
input[type="text"] { height:20px; width:230px; margin-top:2px; }

JavaScript

var editors = $(".image-editor");    

$(".image-toggle").click(function() {
    editors.toggle();
});