JSFiddle - React, Tailwind, and code Playground

HTML

<form>
    <div class="eight columns" data-scroll-reveal="enter bottom move 100px over 0.6s after 0.2s">
        <label for="photo"> <span class="error" id="err-phone">Please Select What you are looking for?</span>

        </label>
        <input class="radio_activator_portraits" name="photo" id="photo1" type="radio" value="portraits">
        <label for="photo1">Portraits</label>
        <input class="radio_activator_weddings" name="photo" id="photo2" type="radio" value="wedding">
        <label for="photo2">Wedding</label>
        <input class="radio_activator_other" name="photo" id="photo3" type="radio" value="other">
        <label for="photo3">other</label>
    </div>
    <div class="eight columns reveal-if-active" id="portraits" name="portraits">Portraits</div>
    <div class="eight columns reveal-if-active" id="wedding" name="wedding">Wedding</div>
    <div class="eight columns reveal-if-active" id="other" name="other">Other</div>
</form>

CSS

.reveal-if-active {
    color: #ccc;
    font-style: italic;
    opacity: 0;
    transform: scale(0.8);
    max-height: 0px;
    transition: 0.5s;
}
input#photo1:checked ~ div#portraits, input#photo2:checked ~ div#wedding, input#photo3:checked ~ div#other {
    color: #f00;
    font-style: normal;
    transform: scale(1);
    opacity: 1;
    max-height: 150px;
}

JavaScript

$(document).ready(function(){
    $('input[name="photo"]').click(function(){
        var phot = $(this).val();
        //alert(phot);
        $('#'+phot).show().css({'background':'yellow','opacity':'1'});
    });
});