JSFiddle - React, Tailwind, and code Playground

by oti ext

HTML

<a href="">border-image</a>

CSS

a{
    display: inline-block;
    border-image-source: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RERCQTZCMEJFQzgzMTFFNDg2RTlFM0QzM0Q3NDcxRUEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RERCQTZCMENFQzgzMTFFNDg2RTlFM0QzM0Q3NDcxRUEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5RjE4NEYzNkVDODExMUU0ODZFOUUzRDMzRDc0NzFFQSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpEREJBNkIwQUVDODMxMUU0ODZFOUUzRDMzRDc0NzFFQSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhgKDSAAAAA2SURBVHjaYmRhYfnPAAGMDKiAJHEmBioBFkpdAhOnqosocglMnKouGo210VgbjTXaxxpAgAEA/l0bQFikDWEAAAAASUVORK5CYII=);
    border-image-slice: 6;
    border-image-width: 3px;
    border-image-repeat: repeat;
}