JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="windows-1251">
    <title>Изменяем вид аттачмента без правок php</title>
    <link href='http://fonts.googleapis.com/css?family=Marmelad&subset=latin,cyrillic' rel='stylesheet'>
</head>

<body>
    <p>
        <span class="attachment">
            <a href="#">file1.zip</a> [4,13 Kb] (cкачиваний: 2)
        </span>
    </p>
    <p>
        <span class="attachment">
            <a href="#">file2.zip</a> [4,13 Kb] (cкачиваний: 12)
        </span>
    </p>
    <p>
        <span class="attachment">
            <a href="#">file3.zip</a> [4,13 Kb] (cкачиваний: 5)
        </span>
    </p>
</body>
</html>

CSS

body {
            width: 700px;
            margin: 50px auto;
            }
            
        .attach-wrap {
            font: normal 16px/28px Marmelad, sans-serif;
            display: inline-block;
            color: #fff;
            background: rgb(255,103,15);
            background: -moz-linear-gradient(top,  rgba(255,103,15,1) 0%, rgba(255,103,15,1) 100%);
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,103,15,1)), color-stop(100%,rgba(255,103,15,1)));
            background: -webkit-linear-gradient(top,  rgba(255,103,15,1) 0%,rgba(255,103,15,1) 100%);
            background: -o-linear-gradient(top,  rgba(255,103,15,1) 0%,rgba(255,103,15,1) 100%);
            background: -ms-linear-gradient(top,  rgba(255,103,15,1) 0%,rgba(255,103,15,1) 100%);
            background: linear-gradient(top,  rgba(255,103,15,1) 0%,rgba(255,103,15,1) 100%);
            text-shadow: 0 1px 2px #bf4800;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px; 
            box-shadow: 0 0 5px rgba();
            }
            .attach-wrap a {
                display: inline-block;
                padding: 0 20px;
                text-decoration: none;
                color: #fff;
                }
                .attach-wrap a:hover {
                    text-shadow: 0 1px 2px #244a6a;
                    -webkit-border-radius: 5px 0 0 5px;
                    -moz-border-radius: 5px 0 0 5px;
                    border-radius: 5px 0 0 5px;
                    background: rgb(15,78,117);
                    background: -moz-linear-gradient(left,  rgba(15,78,117,1) 0%, rgba(70,130,180,1) 100%);
                    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(15,78,117,1)), color-stop(100%,rgba(70,130,180,1)));
                    background: -webkit-linear-gradient(left,  rgba(15,78,117,1) 0%,rgba(70,130,180,1) 100%);
                   ...

JavaScript

jQuery(function($) {
            attachClass = $(".attachment");
            attachClass.each(function(i){
                $(this).wrap('<div class="attach-wrap" id="'+i+'"/>');
                thisA = $(this).find("a");
                thisA.prependTo("#"+i);
            });
        });