JSFiddle - React, Tailwind, and code Playground

by dodozhang21

HTML

<p class="border-image-1">
In elit tortor, eleifend ac dictum ut, rutrum vel metus. Maecenas vestibulum leo vel nibh eleifend elementum. Aenean posuere leo ut sapien vehicula vitae rutrum lorem iaculis. Donec egestas ipsum at nulla lobortis at venenatis augue hendrerit. Sed nec metus tellus, quis mollis tortor. Curabitur at augue non ante rutrum dignissim in sed nisi. Aenean cursus nisl et mauris blandit id rutrum libero semper. Nullam vel odio non felis mattis fringilla sed adipiscing magna. Vestibulum quis lacinia enim. Nullam rhoncus risus convallis quam luctus luctus. Nam et nibh blandit velit convallis convallis eget sed neque.
</p>

<p class="border-image-2">
In elit tortor, eleifend ac dictum ut, rutrum vel metus. Maecenas vestibulum leo vel nibh eleifend elementum. Aenean posuere leo ut sapien vehicula vitae rutrum lorem iaculis. Donec egestas ipsum at nulla lobortis at venenatis augue hendrerit. Sed nec metus tellus, quis mollis tortor. Curabitur at augue non ante rutrum dignissim in sed nisi. Aenean cursus nisl et mauris blandit id rutrum libero semper. Nullam vel odio non felis mattis fringilla sed adipiscing magna. Vestibulum quis lacinia enim. Nullam rhoncus risus convallis quam luctus luctus. Nam et nibh blandit velit convallis convallis eget sed neque.
</p>

<p class="border-image-3">
In elit tortor, eleifend ac dictum ut, rutrum vel metus. Maecenas vestibulum leo vel nibh eleifend elementum. Aenean posuere leo ut sapien vehicula vitae rutrum lorem iaculis. Donec egestas ipsum at nulla lobortis at venenatis augue hendrerit. Sed nec metus tellus, quis mollis tortor. Curabitur at augue non ante rutrum dignissim in sed nisi. Aenean cursus nisl et mauris blandit id rutrum libero semper. Nullam vel odio non felis mattis fringilla sed adipiscing magna. Vestibulum quis lacinia enim. Nullam rhoncus risus convallis quam luctus luctus. Nam et nibh blandit velit convallis convallis eget sed neque.
</p>

<div class="border-image-4-container">
    <div...

CSS

p {
    padding: 1em;
}
.border-image-1 {
    border-color:#94CFC4;
	border-style:solid;
	border-width:6px;
	border-image:url(//regretless.com/oriental/wp-content/themes/itsAGirl/images/captionBorder.png) 6 repeat;
}
.border-image-2 {
    border-color: #603913;
	border-style: solid;
	border-width: 6px;
	border-image: url(//regretless.com/oriental/wp-content/themes/itsAGirl/images/secondaryBorder.png) 5 repeat;
}
.border-image-3 {
    border-color:#E13354;
	border-style:solid;
	border-width:6px;
	border-image:url(//regretless.com/oriental/wp-content/themes/itsAGirl/images/middleBorder.png) 16 repeat;
}

.border-image-4-container {
    border: 0;
	border-bottom: 15px solid #603913;
	border-image: url(//regretless.com/oriental/wp-content/themes/itsAGirl/images/middleBorder.png) 15 repeat;
}
.border-image-4 {
    background: #603913;
    padding: 1em;
}