JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sermon-browser">
	<h2 class="sb-clear">Архив ([sermons_count])</h2>
   	<div class="floatright">[next_page]</div>
   	<div class="floatleft">[previous_page]</div>
	<table class="sermons">
	[sermons_loop]
		<tr>
			<td class="sermon-title">[sermon_title]</td>
		</tr>
		<tr>
			<td class="files">[files_loop][file][/files_loop]</td>
		</tr>
		<tr>
			<td class="embed">[embed_loop][embed][/embed_loop]</td>
		</tr>
		<tr>
			<td class="preacher">Проповедник: [preacher_link] | [date]. [editlink]</td>
		</tr>
   	[/sermons_loop]
	</table>
   	<div class="floatright">[next_page]</div>
   	<div class="floatleft">[previous_page]</div>
   	[creditlink]
</div>

CSS

.sermon-browser h2 {
	clear: both;
}

div.sermon-browser table, div.sermon-browser td {
	border-top: none;
	border-bottom: none;
	border-left: none;
	border-right: none;
}

div.sermon-browser tr td {
	padding: 4px 0;
}

div.sermon-browser table.podcast table {
	margin: 0 1em;
}

div.sermon-browser td.sermon-title, div.sermon-browser td.sermon-passage {
	font-family: "Helvetica Neue",Arial,Helvetica,"Nimbus Sans L",sans-serif;
}

div.sermon-browser table.sermons {
	width: 100%;
clear:both;
}

div.sermon-browser table.sermons td.sermon-title {
	font-weight:bold;
	font-size: 140%;
	padding-top: 2em;
}

div.sermon-browser table.sermons td.sermon-passage {
	font-weight:bold;
	font-size: 110%;
}

div.sermon-browser table.sermons td.preacher {
	border-bottom: 1px solid #444444;
	padding-bottom: 1em;
}

div.sermon-browser table.sermons td.files img {
	border: none;
	margin-right: 24px;
}

table.sermonbrowser td.fieldname {
	font-weight:bold;
	padding-right: 10px;
	vertical-align:bottom;
}

table.sermonbrowser td.field input, table.sermonbrowser td.field select{
	width: 180px;
}

table.sermonbrowser td.field  #date, table.sermonbrowser td.field #enddate {
	width: 150px;
}

table.sermonbrowser td {
	white-space: nowrap;
	padding-top: 5px;
	padding-bottom: 5px;
}

table.sermonbrowser td.rightcolumn {
	padding-left: 10px;
}

div.sermon-browser div.floatright {
	float: right
}

div.sermon-browser div.floatleft {
	float: left
}

img.sermon-icon , img.site-icon {
	border: none;
}

table.podcast {
	margin: 0 0 1em 0;
}

.podcastall {
	float:left;
	background: #fff0c8 url(wp-content/plugins/sermon-browser/sb-includes/icons/podcast_background.png) repeat-x;
	padding: 0.5em;
	font-size: 1em;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
}

.podcastcustom {
	float:right;
	background: #fce4ff url(wp-content/plugins/sermon-browser/sb-includes/icons/podcast_custom_background.png) repeat-x;
	padding: 0.5em;
	font-size: 1em;
	-moz-border-radius: 7px;
	-webkit-border-radius:...