JSFiddle - React, Tailwind, and code Playground

by justi

HTML

{% inlinecss '@BadgeBundle/Resources/public/css/email/welcome-email.css' %}
<div class="email-container">
    <div class="welcome-email">
        <h1>
            Thank you for using GetBadges!
        </h1>

        <h2>Congratulations for creating <strong>your first game!</strong></h2>

        <h2 class="bigger">
            <a title="{{ company.name }}" href="{{ "http://"~company.id~".getbadg.es/" }}"
               target="_blank">{{ company.name }}</a>
        </h2>
        {% if company.private %}
            {% for project in company.projects %}
                {% if loop.first %}
                    <p>You added project
                        <strong>{{ project.name }}</strong>
                        - good job!</p>
                {% else %}
                    <p>Oh, you added even more projects&hellip; that's even better!</p>
                {% endif %}
            {% else %}
                <p>First you should add a project
                    <a title="add the first project" href="{{ "http://"~company.id~".getbadg.es/manager/project/new" }}"
                       target="_blank">here</a>
                </p>
            {% endfor %}
            <p>Next steps to start to play:</p>
            <ul>
                <li>Add integrations
                    <a title="add new integration" href="{{ "http://"~company.id~".getbadg.es/integrations" }}"
                       target="_blank">here</a>
                    <span class="tip">Tip: the more the better!</span></li>
                <li><a title="add additional email" href="{{ "http://"~company.id~".getbadg.es/profile/settings" }}"
                       target="_blank">Add your any emails</a>
                    you using to commit, registered in trello, JIRA etc.</li>
            </ul>

        {% else %}
            <p>Your game is public, so any GetBadges player can join it :)</p>
            <p>Integration with GitHub is already added! You can add more integrations
                <a title="add...

CSS

.email-container {
    background-color: #f1f1f1;
}

.welcome-email {
    max-width: 450px;
    margin: 20px auto;
    color: #444;
    padding: 25px;
    background-color: white;
    text-align: justify;
    font-size: 18px;
}

.welcome-email > h1 {
    text-align: center;
    margin-top:30px;
    margin-bottom: 40px;
}

.welcome-email > h2 {
    text-align: center;
    margin-top:10px;
    font-weight: normal;
}

h2 a {
    text-decoration: none;
}

.tip {
    background-color: #f5f5f5;
    padding: 3px 8px;
    font-size: 0.9em;
    margin: 1px 5px;
}
.bigger {
    font-size: 2em;
}

.welcome-email > p {

}

.welcome-email > p > strong {
}

.welcome-email > p > a {
}

.welcome-email > p > a > strong {
}

.welcome-email > p.smaller {
    font-size: 14px;
    margin-bottom: 10px;
}

.footer {
    margin-top: 40px;
}