JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
<div class="ui segment">
<h3 class="header">
Message in form (not in accordion)
</h3>
<form class="ui form">
<div class="field">
<div class="ui visible warning icon message">
<i class="exclamation triangle icon"></i>
<div class="content">
<div class="header">
Test
</div>
Test test test test test
</div>
</div>
</div>
</form>
</div>
<div class="ui segment">
<h3 class="header">
Message in accordion (not in form)
</h3>
<div class="ui fluid accordion">
<div class="title">
<i class="dropdown icon"></i> Test
</div>
<div class="content">
<div class="ui warning icon message">
<i class="exclamation triangle icon"></i>
<div class="content">
<div class="header">
Test
</div>
Test test test test test
</div>
</div>
</div>
</div>
</div>
<div class="ui segment">
<h3 class="header">
Message in form (in accordion)
</h3>
<form class="ui form">
<div class="field">
<div class="ui fluid accordion">
<div class="title">
<i class="dropdown icon"></i> Test
</div>
<div class="content">
<div class="ui warning icon message">
<i class="exclamation triangle icon"></i>
<div class="content">
<div class="header">
Test
</div>
Test test test test test
</div>
</div>
</div>
</div>
</div>
</form>
</div>
CSS
.ui.form .ui.accordion .ui.icon.message{
display:flex !important;
}
JavaScript
$('.accordion').accordion('open', 0);