JSFiddle - React, Tailwind, and code Playground

by vendruscolo

HTML

<div class='content'>
    Plain my element
    <my-el>
        <img src="https://s3-eu-west-1.amazonaws.com/uploads-eu.hipchat.com/214790/1500400/lX8QKASWLAKotii/29e222d6-5828-4c3e-8153-5d5d065e91b1-original.png"/>
    </my-el>
    <br />
    Small my element
    <my-el style="width: 50px">
        <img src="https://s3-eu-west-1.amazonaws.com/uploads-eu.hipchat.com/214790/1500400/lX8QKASWLAKotii/29e222d6-5828-4c3e-8153-5d5d065e91b1-original.png"/>
    </my-el>
    <br />
    Big my element
    <my-el style="width: 400px">
        <img src="https://s3-eu-west-1.amazonaws.com/uploads-eu.hipchat.com/214790/1500400/lX8QKASWLAKotii/29e222d6-5828-4c3e-8153-5d5d065e91b1-original.png"/>
    </my-el>
    2x my element
    <my-el style="width: 200%">
        <img src="https://s3-eu-west-1.amazonaws.com/uploads-eu.hipchat.com/214790/1500400/lX8QKASWLAKotii/29e222d6-5828-4c3e-8153-5d5d065e91b1-original.png"/>
    </my-el>
    Huge
    <my-el style="width: 700px">
        <img src="https://s3-eu-west-1.amazonaws.com/uploads-eu.hipchat.com/214790/1500400/lX8QKASWLAKotii/29e222d6-5828-4c3e-8153-5d5d065e91b1-original.png"/>
    </my-el>
</div>

CSS

.content {
    width: 300px;
    outline: 1px dashed red;    
}

my-el {
    display: inline-block;
    width: 50%;
    border: 1px solid silver;
}

my-el img, my-el canvas {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

my-el img {
    display: block;
}