JSFiddle - React, Tailwind, and code Playground

HTML

<section id=test-attr>
    <p>Avec <code>.attr()</code> :</p>
    <input type=text lettre=A />
    <pre></pre>
</section>

<section id=test-prop>
    <p>Avec <code>.prop()</code> :</p>
    <input type=text lettre=B />
    <pre></pre>
</section>

CSS

section {
    background: #eee;
    border: solid thin #aac;
    border-radius: 5px;
    padding: 1em; margin: 1em;
    box-shadow: 2px 1px 5px #aaa;
}
p {
    margin: 0;
}
pre {
    padding: 1ex; margin: 1ex 0;
    border: dashed thin gray;
    background: #ddd;
}

JavaScript

$("#test-attr pre").text(
    $("#test-attr input").attr("lettre")
);

$("#test-prop pre").text(
    $("#test-prop input").prop("lettre")
);