JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://rawgit.com/Hagsten/Talkify/master/styles/talkify-playlist.css">
<link rel="stylesheet" href="https://rawgit.com/Hagsten/Talkify/master/styles/talkify-common.css">
<link rel="stylesheet" href="https://rawgit.com/Hagsten/Talkify/master/styles/talkify-audiocontrols.css">
<script src="https://rawgit.com/Hagsten/Talkify/master/dist/talkify.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<form id="test">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputName">Name</label>
<input type="test" class="form-control" id="exampleInputName" placeholder="Name">
</div>
<div class="form-group">
<label for="exampleSelect1">Gender</label>
<select class="form-control" id="exampleSelect1">
<option>Male</option>
<option>Female</option>
</select>
</div>
<div class="form-group">
<label for="exampleTextarea">Additional comments</label>
<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
</div>
<div class="form-group">
<label for="exampleCheckbox">Subscribe to newsletter</label>
<input id="exampleCheckbox" type="checkbox"/>
</div>
<div class="form-group">
<label for="exampleInputFile">Attach file</label>
<input type="file" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
CSS
.talkify-audio-control {
color: white;
}
.fa-2x {
font-size: 20px !important;
}
form{
padding: 10px;
}
audio{
display: none;
}
JavaScript
talkify.config.remoteService.host = 'https://talkify.net';
talkify.config.remoteService.apiKey = '46b32f4e-6b73-40ee-8ae1-4a17cb1b18f6';
talkify.config.ui.audioControls = {
enabled: false,
};
$(document).ready(function() {
talkify.formReader.addForm(document.getElementById("test"));
});