JSFiddle - React, Tailwind, and code Playground
HTML
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<style>
.div1, .div2 {
display: none;
}
</style>
</head>
<body>
<div class="container">
<form>
<div class="row">
<div class="col-md-6">
<div class="form-inline form-group">
<div class="input-group">
<label for="">Pessoa</label><br>
<div class="form-check form-check-inline">
<label class="form-check-label">
<input class="form-check-input radio1" type="radio" name="pessoa" id="pessoa1"
value="pessoa1">Física
</label>
<label class="form-check-label ">
<input class="form-check-input radio2" type="radio" name="pessoa" id="pessoa2"
value="pessoa2">Jurídica
</label>
</div>
</div>
</div>
<div class="div1 content">
<div class="form-group"><label...
CSS
div1, div2 {
display: none
}
JavaScript
$(function () {
$('.radio1').click(function () {
$('.div1').show();
$('.div2').hide();
});
$('.radio2').click(function () {
$('.div2').show();
$('.div1').hide();
});
});