An easy-to-follow guide on making an interactive Tarot game (code samples included)

How about a bit of fortune-telling? And what could be better for divination than Tarot cards? This time, you’ll be the one performing readings for your recipients, as we’ve created a new interactive Tarot game. 

This game is your tool to make your emails more unique and interactive, as well as to create special newsletters for different occasions. You can design emails with predictions for Halloween, tease products through different card descriptions, or place parts of promo codes that recipients must piece together. Your imagination is the only limit. In this article, we’re going to show you how to set this game up for your email campaigns.

How this game works

This interactive mechanic is pretty straightforward. Recipients must choose three out of ten tarot cards, and once they have done so, clicking the button reveals the reading based on the cards.

The idea of this mechanic is simple, but you can adapt it to any occasion, festivity, or industry:

• create themed newsletters with this game, replacing the cards with any other things that fit your niche;
• tease future products and events by embedding hints inside texts.

Our game creation guide will include the following:

• AMP version of the game;
• kinetic version, built with HTML5 and CSS3;
• fallback version for email clients that do not support interactivity.

The kinetic (HTML5 and CSS3) version is the main version and will be shown when the email client supports both technologies. The AMP version will be shown if email clients support AMP and will replace your kinetic version in these cases. Meanwhile, the fallback version will be shown when email clients don’t support both HTML5/CSS3 nor AMP. 

AMP version

We start creating our game with the AMP version. You’ll need to use a one-column structure and to enable “include it in AMP HTML” so that the structure is visible only in AMP HTML.

After that, add an HTML block and paste the following code into this block.

Once it’s done, paste this code inside the HTML block:

<style amp-custom>
  .tarot-amp .cards { position: relative; width: 100%; height: 200px; } .tarot-amp .card-first { width: 115px; height: 200px; position: absolute; top: 0; left: 0; cursor: pointer; } .tarot-amp .card { width: 115px; height: 200px; background-position: 0 0; background-repeat: no-repeat; background-size: contain; background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_f42450335403b704e1ff2fb2e84b2b2f49ebe2c3d0d93fcdfcbabb22543134cc/images/tarotback.png); position: absolute; top: 0; left: 0; transition-duration: 0.4s; transition-timing-function: ease-in; cursor: pointer; border: 0; padding: 0; } .tarot-amp .card:hover { top: -5px; } .tarot-amp .card.move-top, .tarot-amp .card.move-top:hover { top: -10px; } .card2.move-right { left: 8%; } .card3.move-right { left: 16%; } .card4.move-right { left: 24%; } .card5.move-right { left: 32%; } .card6.move-right { left: 40%; } .card7.move-right { left: 48%; } .card8.move-right { left: 56%; } .card9.move-right { left: 64%; } .card10.move-right { left: 72%; } .tarot-amp .result-card { display: flex; justify-content: space-between; align-items: flex-start; padding: 15px 0; } .tarot-amp .result-card-text { padding: 0 20px; } .tarot-amp .result-card-text p { padding-top: 10px; } .tarot-amp .result-card-img span { display: block; width: 87px; height: 150px; background-repeat: no-repeat; background-position: center center; background-size: cover; } .tarot-amp button { border: 0; cursor: pointer; } #tarot-list-1>div, #tarot-list-2>div, #tarot-list-3>div { position: relative; height: auto; } @media only screen and (max-width: 600px) { .tarot-amp .card { width: 76px; height: 133px; } .tarot-amp .cards { height: 133px; } .tarot-amp .result-card-img span { width: 58px; height: 100px; } .tarot-amp .result-card-text { padding-right: 0; } }
</style>
<div class="tarot-amp">
  <div class="cards-container">
    <div class="cards">
      <button class="card"></button>
      <button class="card"></button>
      <button class="card"></button>
      <button class="card"></button>
      <button class="card"></button>
      <button class="card"></button>
      <button class="card"></button>
      <button class="card"></button>
      <button class="card"></button>
      <button class="card"></button>
      <div class="card-first"></div>
    </div>
    <table cellpadding="0" cellspacing="0" width="100%">
      <tr>
        <td align="center" class="esd-block-button es-p15t">
          <span class="es-button-border">
            <button type="button" class="es-button">
              Get My Reading
            </button>
          </span>
        </td>
      </tr>
    </table>
  </div>
  <div esd-text="true" class="result esd-text">
    <p style="font-size: 16px">
      The first card will tell you about your
      <b>
        relationship
      </b>
      , the second about your
      <b>
        career
      </b>
      , and the third about
      <b>
        the future
      </b>
      .
    </p>
    <amp-list id="tarot-list-1" layout="flex-item" src="https://amp.stripo.email/v1/list/ytxje/tarot" width="auto" style="min-height: 40px">
      <template type="amp-mustache">
        {{#cards}}
        <div class="result-card">
          <div class="result-card-img">
            <span style="background-image: url({{img}})"></span>
          </div>
          <div class="result-card-text">
            <h3>
              {{title}}
            </h3>
            <div esd-text="true" class="esd-text">
              {{{description}}}
            </div>
          </div>
        </div>
        {{/cards}}
      </template>
    </amp-list>
  </div>
</div>

In this game, we use the `amp-list` component. It dynamically loads data from a JSON endpoint and displays it using a specified template. An `amp-list` tag always includes a `template` tag.

Our JSON looks like this: https://amp.stripo.email/v1/list/ytxje/tarot

To demonstrate the game and ensure it functions as intended, we use a pre-prepared JSON file. If you wish to replace the data with your own, you need to create a JSON file and update the `src` attribute in the `amp-list` tag to point to it. We have a separate guide for creating a JSON file from our support team.

Now, let’s break down what’s inside this JSON. It contains:

• cards, which is an array containing all the cards;
• id is a sequential number;
• img is a link to the card’s image;
• description is a description of the card;
• title is the card’s name.

To output a variable’s value from JSON, use the `amp-mustache` component. Here is the syntax for this within the game:

• {{variable}} in double curly braces specifies the name of a variable whose value should be output as text;
• {{{unescaped}}} in triple curly braces means the variable’s value is output as unescaped HTML;
• {{#section}} {{/section}} is a section tag; it can check for the existence of a variable and iterate over it if it is an array;
• {{^section}} {{/section}} is an inverted tag; it can check for the absence of a variable.

Currently, the game displays a deck of cards, a button, and all the card options.

The image for the card backs can be changed via the styles:

The final text before the cards can be changed here:

You also need to update the cards’ images, names, and descriptions in the JSON file.

Next, ensure that clicking on the deck causes it to expand, allowing the recipient to select three cards. To do this, you must modify the `div` with the class `cards`.

You need to add the following attributes to all `button` tags within this block:

• `on="tap:AMP.setState({ active1:1, cards: +cards +1})"` creates a variable `active1` (the 1 in the name increments for each button) and sets its value to 1 (this value is the same for all such variables); it also creates a variable `cards`, assigning it its current value plus 1;
• `card1.toggleClass(class='move-top', force=true)` adds the class `move-top` to the element with the ID `card1` (the element being clicked);
• `[class]="'card card1 '+move"` adds the classes `card` and `card1`, as well as appends the value of the variable `move` as a class;
• `[disabled]="active1 == 1 || cards >=3"` adds the `disabled` attribute if the variable `active1` equals 1 or if the variable `cards` is greater than or equal to 3. This prevents a card from being selected again and deactivates all cards once three have been selected;
• `tabindex="1"` defines the focus order when navigating between elements using the Tab key; this is a mandatory attribute when using `on="tap"`.

For the `div` with the class `card-first`, you need to add the following attributes so that the deck expands when it is clicked:

• `on="tap:"` is a "click" event handler;
• `AMP.setState({hide1: 1, move: 'move-right', random1: floor(random() * 7)+1, random2: floor(random() * 7)+1, random3: floor(random() * 8)+1 })` sets the variable `hide1` to 1, indicating that the recipient has clicked the element (which triggers its concealment); assigns the value `'move-right'` to the `move` variable (this value is added to the buttons’ class list); and generates variables with random values ​​to display random cards. In our example, there are 22 possible outcomes; to ensure no two cards are identical, we split the card-number generation into two stages. In the first stage, we generate a random number between 1 and 7 for `random1`, another between 1 and 7 for `random2`, and a number between 1 and 8 for `random3` (totaling 22). In the next stage (further down in the code), we will sum these values ​​to arrive at a card number, ensuring no duplicates;
• `[hidden]="hide1 == 1"` adds the `hidden` attribute to hide the element when the variable `hide1` equals 1;
• `role="button"` specifies that the element should function as a button. In AMP, this attribute is mandatory (along with `on="tap:"`) whenever the tag to which it is applied is not an actual `<button>` element.

All this might look rather complicated, but in reality, you just need to replace this piece of code.

with this one:

<div class="cards">
      <button id="card1" type="button" [disabled]="active1 == 1 || cards >=3" tabindex="1" on="tap:AMP.setState({ active1:1, cards: +cards +1}),card1.toggleClass(class='move-top', force=true)" [class]="'card card1 '+move" class="card"></button>
      <button on="tap:AMP.setState({ active2:1, cards: +cards +1}),card2.toggleClass(class='move-top', force=true)" [class]="'card card2 '+move" id="card2" type="button" [disabled]="active2 == 1 || cards >=3" tabindex="1" class="card"></button>
      <button type="button" [disabled]="active3 == 1 || cards >=3" tabindex="1" on="tap:AMP.setState({ active3:1, cards: +cards +1}),card3.toggleClass(class='move-top', force=true)" [class]="'card card3 '+move" id="card3" class="card"></button>
      <button id="card4" type="button" [disabled]="active4 == 1 || cards >=3" tabindex="1" on="tap:AMP.setState({ active4:1, cards: +cards +1}),card4.toggleClass(class='move-top', force=true)" [class]="'card card4 '+move" class="card"></button>
      <button [disabled]="active5 == 1 || cards >=3" tabindex="1" on="tap:AMP.setState({ active5:1, cards: +cards +1}),card5.toggleClass(class='move-top', force=true)" [class]="'card card5 '+move" id="card5" type="button" class="card"></button>
      <button type="button" [disabled]="active6 == 1 || cards >=3" tabindex="1" on="tap:AMP.setState({ active6:1, cards: +cards +1}),card6.toggleClass(class='move-top', force=true)" [class]="'card card6 '+move" id="card6" class="card"></button>
      <button tabindex="1" on="tap:AMP.setState({ active7:1, cards: +cards +1}),card7.toggleClass(class='move-top', force=true)" [class]="'card card7 '+move" id="card7" type="button" [disabled]="active7 == 1 || cards >=3" class="card"></button>
      <button [disabled]="active8 == 1 || cards >=3" tabindex="1" on="tap:AMP.setState({ active8:1, cards: +cards +1}),card8.toggleClass(class='move-top', force=true)" [class]="'card card8 '+move" id="card8" type="button" class="card"></button>
      <button id="card9" type="button" [disabled]="active9 == 1 || cards >=3" tabindex="1" on="tap:AMP.setState({ active9:1, cards: +cards +1}),card9.toggleClass(class='move-top', force=true)" [class]="'card card9 '+move" class="card"></button>
      <button id="card10" type="button" [disabled]="active10 == 1 || cards >=3" tabindex="1" on="tap:AMP.setState({ active10:1, cards: +cards +1}),card10.toggleClass(class='move-top', force=true)" [class]="'card card10 '+move" class="card"></button>
      <div on="tap:AMP.setState({hide1: 1, move: 'move-right', random1: floor(random() * 7)+1, random2: floor(random() * 7)+1, random3: floor(random() * 8)+1 })" [hidden]="hide1 == 1" role="button" tabindex="1" class="card-first"></div>
    </div>

Next, you need to add display conditions and make the “Get My Reading” button functional. To do this, replace the `table` tag containing the button.

with the following code:

<table cellpadding="0" cellspacing="0" width="100%"  hidden [hidden]="cards < 3">
      <tr>
        <td align="center" class="esd-block-button">
          <span class="es-button-border">
            <button type="button" class="es-button" on="tap:AMP.setState({hide2: 1, card1: random1, card2: random1+random2, card3: random1+random2+random3 })">
              Get My Reading
            </button>
          </span>
        </td>
      </tr>
    </table>

The structure of this code is quite simple. The following has been added to the table to make the button functional:

• `hidden` is an attribute that hides an element by default;
• `[hidden]="cards < 3"` is a condition for hiding the element; the `hidden` attribute remains active as long as `cards` is less than 3.

The `button` tag has been modified as follows:

• `on="tap:AMP.setState({hide2: 1, card1: random1, card2: random1+random2, card3: random1+random2+random3 })"` sets the variable `hide2` to 1 to indicate that the recipient has clicked the button, which triggers the hiding of the deck block and the display of the results block (further down in the code). It also defines card variables: `card1` is assigned the value of `random1` (a random number from 1 to 7); `card2` is assigned the sum of `random1` and `random2` (resulting in a value between 8 and 14); and `card3` is assigned the sum of all three variables: `random1`, `random2`, and `random3` (resulting in a value between 15 and 22). This ensures that the numbers will never repeat.

Next, we need to add functionality to display only three cards from the entire list. Replace the line `div class="result-card"`.

with the following code:

<div hidden [hidden]="card1 != {{id}} && card2 != {{id}} && card3 != {{id}}" class="result-card">

In this code, `[hidden]="card1 != {{id}} && card2 != {{id}} && card3 != {{id}}"` checks the values ​​of the variables representing the selected cards; if none of them match the card's `id` from the JSON, the card remains hidden.

The next step is to hide the results block so that it is not visible at the very start of the game. Add the `hidden` attribute —`[hidden]="hide2!=1"`— to the `div` element with the class `result`.

<div hidden [hidden]="hide2!=1" class="result">

This variable changes when the “Get My Reading” button is clicked. As soon as the recipient clicks the button, the game will display the entire results block.

After that, you need to add the attribute [hidden]="hide2 == 1" to the div block with the class "cards-container".

Just paste this code there:

<div [hidden]="hide2 == 1" class="cards-container">

As soon as the recipient clicks the “Get My Reading” button, this code will hide the game block.

The full AMP version code

Here’s the full code of the AMP version of the game so you can check whether you did everything right.

<style amp-custom>
  .tarot-amp .cards { position: relative; width: 100%; height: 200px; } .tarot-amp .card-first { width: 115px; height: 200px; position: absolute; top: 0; left: 0; cursor: pointer; } .tarot-amp .card { width: 115px; height: 200px; background-position: 0 0; background-repeat: no-repeat; background-size: contain; background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_f42450335403b704e1ff2fb2e84b2b2f49ebe2c3d0d93fcdfcbabb22543134cc/images/tarotback.png); position: absolute; top: 0; left: 0; transition-duration: 0.4s; transition-timing-function: ease-in; cursor: pointer; border: 0; padding: 0; } .tarot-amp .card:hover { top: -5px; } .tarot-amp .card.move-top, .tarot-amp .card.move-top:hover { top: -10px; } .card2.move-right { left: 8%; } .card3.move-right { left: 16%; } .card4.move-right { left: 24%; } .card5.move-right { left: 32%; } .card6.move-right { left: 40%; } .card7.move-right { left: 48%; } .card8.move-right { left: 56%; } .card9.move-right { left: 64%; } .card10.move-right { left: 72%; } .tarot-amp .result-card { display: flex; justify-content: space-between; align-items: flex-start; padding: 15px 0; } .tarot-amp .result-card-text { padding: 0 20px; } .tarot-amp .result-card-text p { padding-top: 10px; } .tarot-amp .result-card-img span { display: block; width: 87px; height: 150px; background-repeat: no-repeat; background-position: center center; background-size: cover; } .tarot-amp .black-btn { border: 0; background-color: #000; padding: 8px 16px; color: #fff; font-size: 16px; margin: 10px 0; cursor: pointer; } #tarot-list-1>div, #tarot-list-2>div, #tarot-list-3>div { position: relative; height: auto; } @media only screen and (max-width: 600px) { .tarot-amp .card { width: 76px; height: 133px; } .tarot-amp .cards { height: 133px; } .tarot-amp .result-card-img span { width: 58px; height: 100px; } .tarot-amp .result-card-text { padding-right: 0; } }
</style>
<div class="tarot-amp">
  <div [hidden]="hide2 == 1" class="cards-container">
    <div class="cards">
      <button id="card1" type="button" [disabled]="active1 == 1 || cards >=3" tabindex="1" on="tap:AMP.setState({ active1:1, cards: +cards +1}),card1.toggleClass(class='move-top', force=true)" [class]="'card card1 '+move" class="card"></button>
      <button on="tap:AMP.setState({ active2:1, cards: +cards +1}),card2.toggleClass(class='move-top', force=true)" [class]="'card card2 '+move" id="card2" type="button" [disabled]="active2 == 1 || cards >=3" tabindex="1" class="card"></button>
      <button type="button" [disabled]="active3 == 1 || cards >=3" tabindex="1" on="tap:AMP.setState({ active3:1, cards: +cards +1}),card3.toggleClass(class='move-top', force=true)" [class]="'card card3 '+move" id="card3" class="card"></button>
      <button id="card4" type="button" [disabled]="active4 == 1 || cards >=3" tabindex="1" on="tap:AMP.setState({ active4:1, cards: +cards +1}),card4.toggleClass(class='move-top', force=true)" [class]="'card card4 '+move" class="card"></button>
      <button [disabled]="active5 == 1 || cards >=3" tabindex="1" on="tap:AMP.setState({ active5:1, cards: +cards +1}),card5.toggleClass(class='move-top', force=true)" [class]="'card card5 '+move" id="card5" type="button" class="card"></button>
      <button type="button" [disabled]="active6 == 1 || cards >=3" tabindex="1" on="tap:AMP.setState({ active6:1, cards: +cards +1}),card6.toggleClass(class='move-top', force=true)" [class]="'card card6 '+move" id="card6" class="card"></button>
      <button tabindex="1" on="tap:AMP.setState({ active7:1, cards: +cards +1}),card7.toggleClass(class='move-top', force=true)" [class]="'card card7 '+move" id="card7" type="button" [disabled]="active7 == 1 || cards >=3" class="card"></button>
      <button [disabled]="active8 == 1 || cards >=3" tabindex="1" on="tap:AMP.setState({ active8:1, cards: +cards +1}),card8.toggleClass(class='move-top', force=true)" [class]="'card card8 '+move" id="card8" type="button" class="card"></button>
      <button id="card9" type="button" [disabled]="active9 == 1 || cards >=3" tabindex="1" on="tap:AMP.setState({ active9:1, cards: +cards +1}),card9.toggleClass(class='move-top', force=true)" [class]="'card card9 '+move" class="card"></button>
      <button id="card10" type="button" [disabled]="active10 == 1 || cards >=3" tabindex="1" on="tap:AMP.setState({ active10:1, cards: +cards +1}),card10.toggleClass(class='move-top', force=true)" [class]="'card card10 '+move" class="card"></button>
      <div on="tap:AMP.setState({hide1: 1, move: 'move-right', random1: floor(random() * 7)+1, random2: floor(random() * 7)+1, random3: floor(random() * 8)+1 })" [hidden]="hide1 == 1" role="button" tabindex="1" class="card-first"></div>
    </div>
    <div hidden [hidden]="cards < 3">
      <p>
        <button type="button" on="tap:AMP.setState({hide2: 1, card1: random1, card2: random1+random2, card3: random1+random2+random3 })" class="black-btn">
          Get My Reading
        </button>
      </p>
    </div>
  </div>
  <div hidden [hidden]="hide2!=1" class="result">
    <p style="font-size: 16px">
      The first card will tell you about your
      <b>
        relationship
      </b>
      , the second about your
      <b>
        career
      </b>
      , and the third about
      <b>
        the future
      </b>
      .
    </p>
    <amp-list width="auto" id="tarot-list-1" layout="flex-item" src="https://amp.stripo.email/v1/list/ytxje/tarot" style="min-height: 40px">
      <template type="amp-mustache">
        {{#cards}}
        <div hidden [hidden]="card1 != {{id}} && card2 != {{id}} && card3 != {{id}}" class="result-card">
          <div class="result-card-img">
            <span style="background-image: url({{img}})"></span>
          </div>
          <div class="result-card-text">
            <h3>
              {{title}}
            </h3>
            <div>
              {{{description}}}
            </div>
          </div>
        </div>
        {{/cards}}
      </template>
    </amp-list>
  </div>
</div>

Kinetic version built with HTML5 and CSS3

Now it’s time to create a kinetic version of our game. Prepare another structure below our AMP version and set it to “Include in HTML only.”

Once it’s done, drop an HTML block into this structure and paste this code:

<style>
  .tarot-html .cards { position: relative; width: 100%; height: 200px; } .tarot-html .card-first { display: block; width: 115px; height: 200px; position: absolute; top: 0; left: 0; cursor: pointer; } .tarot-html .card { width: 115px; height: 200px; background-position: 0 0; background-repeat: no-repeat; background-size: contain; background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_f42450335403b704e1ff2fb2e84b2b2f49ebe2c3d0d93fcdfcbabb22543134cc/images/tarotback.png); position: absolute; top: 0; left: 0; transition-duration: 0.4s; transition-timing-function: ease-in; cursor: pointer; border: 0; padding: 0; } .tarot-html .card:hover { top: -5px; } .tarot-html .result { display: none; } .tarot-html .result-card { display: none; justify-content: space-between; align-items: flex-start; padding: 15px 0; } .tarot-html .result-card-text { padding: 0 20px; } .tarot-html .result-card-text p { padding-top: 10px; } .tarot-html .result-card-img span { display: block; width: 87px; height: 150px; background-repeat: no-repeat; background-position: center center; background-size: cover; } .tarot-html .es-button { border: 0; cursor: pointer; } .tarot-html .button-block { display: none; } .tarot-html .curtain { display: none; width: 100%; height: 100%; z-index: 99; position: relative; } @media only screen and (max-width: 600px) { .tarot-html .card { width: 76px; height: 133px; } .tarot-html .cards { height: 133px; } .tarot-html .result-card-img span { width: 58px; height: 100px; } .tarot-html .result-card-text { padding-right: 0; } } #card1-input:checked~* .card1, #card2-input:checked~* .card2, #card3-input:checked~* .card3, #card4-input:checked~* .card4, #card5-input:checked~* .card5, #card6-input:checked~* .card6, #card7-input:checked~* .card7, #card8-input:checked~* .card8, #card9-input:checked~* .card9, #card10-input:checked~* .card10 { top: -10px; } #card-first:checked~* .card2 { left: 8%; } #card-first:checked~* .card3 { left: 16%; } #card-first:checked~* .card4 { left: 24%; } #card-first:checked~* .card5 { left: 32%; } #card-first:checked~* .card6 { left: 40%; } #card-first:checked~* .card7 { left: 48%; } #card-first:checked~* .card8 { left: 56%; } #card-first:checked~* .card9 { left: 64%; } #card-first:checked~* .card10 { left: 72%; } #card-first:checked~* .card-first { display: none; } .cards-input:checked~.cards-input:checked~.cards-input:checked~* .button-block, .cards-input:checked~.cards-input:checked~.cards-input:checked~* .curtain { display: block; } #card1-input:checked~* .result-card-1, #card2-input:checked~* .result-card-2, #card3-input:checked~* .result-card-3, #card4-input:checked~* .result-card-4, #card5-input:checked~* .result-card-5, #card6-input:checked~* .result-card-6, #card7-input:checked~* .result-card-7, #card8-input:checked~* .result-card-8, #card9-input:checked~* .result-card-9, #card10-input:checked~* .result-card-10 { display: flex; } #result-button:checked~.cards-container { display: none; } #result-button:checked~.result { display: block; } 
</style>
  <div class="tarot-html">
    <input id="card-first" type="radio" style="display: none">
    <input id="card1-input" type="radio" class="cards-input" style="display: none">
    <input id="card2-input" type="radio" class="cards-input" style="display: none">
    <input type="radio" id="card3-input" class="cards-input" style="display: none">
    <input type="radio" id="card4-input" class="cards-input" style="display: none">
    <input id="card5-input" type="radio" class="cards-input" style="display: none">
    <input id="card6-input" type="radio" class="cards-input" style="display: none">
    <input type="radio" id="card7-input" class="cards-input" style="display: none">
    <input id="card8-input" type="radio" class="cards-input" style="display: none">
    <input type="radio" id="card9-input" class="cards-input" style="display: none">
    <input id="card10-input" type="radio" class="cards-input" style="display: none">
    <input id="result-button" type="radio" style="display: none">
    <div class="cards-container">
      <div class="cards">
        <label for="card1-input" class="card card1"></label>
        <label for="card2-input" class="card card2"></label>
        <label for="card3-input" class="card card3"></label>
        <label for="card4-input" class="card card4"></label>
        <label for="card5-input" class="card card5"></label>
        <label for="card6-input" class="card card6"></label>
        <label for="card7-input" class="card card7"></label>
        <label for="card8-input" class="card card8"></label>
        <label for="card9-input" class="card card9"></label>
        <label for="card10-input" class="card card10"></label>
        <label for="card-first" class="card-first"></label>
        <div class="curtain"></div>
      </div>
      <div class="button-block">
        <table cellpadding="0" width="100%" cellspacing="0">
          <tr>
            <td align="center" class="esd-block-button es-p15t">
              <span class="es-button-border">
                <label for="result-button" class="es-button">
                  Get My Reading
              </label>
            </span>
            </td>
          </tr>
      </table>
    </div>
    </div>
    <div class="result">
      <p style="font-size: 16px">
        The first card will tell you about your
        <b>
          relationship
        </b>
        , the second about your
        <b>
          career
        </b>
        , and the third about
        <b>
          the future
        </b>
        .
      </p>
      <div class="result-card result-card-1">
        <div class="result-card-img">
          <span style="background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_fa8728d25e2b890dd6dfc83b836142569b660293ba19a9f5386f8357c9dfa377/images/thefool.png)"></span>
        </div>
        <div class="result-card-text">
          <h3>
            The Fool
          </h3>
          <div>
            <p>
              The Fool represents new beginnings, innocence, and limitless potential. Symbolizing a leap of faith, this card encourages spontaneity and adventure, urging you to trust in the journey ahead with an open heart and mind. It reminds you to embrace the unknown and take risks, as the path may lead to growth and unexpected opportunities.
            </p>
          </div>
        </div>
      </div>
      <div class="result-card result-card-2">
        <div class="result-card-img">
          <span style="background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_fa8728d25e2b890dd6dfc83b836142569b660293ba19a9f5386f8357c9dfa377/images/thejudgement.png)"></span>
        </div>
        <div class="result-card-text">
          <h3>
            The Judgement
          </h3>
          <div>
            <p>
              Judgement represents awakening, renewal, and transformation. It speaks to the call for personal reckoning or a moment of truth, where past actions are evaluated, and forgiveness or release can occur. The card encourages you to embrace self-reflection and make the necessary changes for growth and renewal.
            </p>
          </div>
        </div>
      </div>
      <div class="result-card result-card-3">
        <div class="result-card-img">
          <span style="background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_fa8728d25e2b890dd6dfc83b836142569b660293ba19a9f5386f8357c9dfa377/images/thehighpriestess.png)"></span>
        </div>
        <div class="result-card-text">
          <h3>
            The High Priestess
          </h3>
          <div>
            <p>
              The High Priestess embodies intuition, mystery, and inner wisdom. She represents the subconscious mind, encouraging you to trust your instincts and seek answers from within. The card invites you to explore deeper knowledge, secrets, and the spiritual realm, emphasizing the importance of silence and reflection.
            </p>
          </div>
        </div>
      </div>
      <div class="result-card result-card-4">
        <div class="result-card-img">
          <span style="background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_fa8728d25e2b890dd6dfc83b836142569b660293ba19a9f5386f8357c9dfa377/images/theworld.png)"></span>
        </div>
        <div class="result-card-text">
          <h3>
            The World
          </h3>
          <div>
            <p>
              The World symbolizes completion, wholeness, and fulfillment. It represents the successful culmination of a journey, bringing a sense of achievement, balance, and unity. This card reflects the harmonious integration of all aspects of your life and encourages celebration of your accomplishments and the readiness for new beginnings.
            </p>
          </div>
        </div>
      </div>
      <div class="result-card result-card-5">
        <div class="result-card-img">
          <span style="background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_fa8728d25e2b890dd6dfc83b836142569b660293ba19a9f5386f8357c9dfa377/images/thetemperance.png)"></span>
        </div>
        <div class="result-card-text">
          <h3>
            The Temperance
          </h3>
          <div>
            <p>
              Temperance symbolizes balance, harmony, and moderation. It encourages blending opposing forces with patience and grace, finding equilibrium in your life. The card invites you to be patient, tempering extremes and fostering peace through careful adjustment and self-control.
            </p>
          </div>
        </div>
      </div>
      <div class="result-card result-card-6">
        <div class="result-card-img">
          <span style="background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_fa8728d25e2b890dd6dfc83b836142569b660293ba19a9f5386f8357c9dfa377/images/thehangedman.png)"></span>
        </div>
        <div class="result-card-text">
          <h3>
            The Hanged Man
          </h3>
          <div>
            <p>
              The Hanged Man symbolizes surrender, perspective, and letting go. It suggests a pause or a need to release old habits, attachments, or ways of thinking. The card invites you to look at situations from a new angle and trust that time and patience will bring clarity and transformation.
            </p>
          </div>
        </div>
      </div>
      <div class="result-card result-card-7">
        <div class="result-card-img">
          <span style="background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_fa8728d25e2b890dd6dfc83b836142569b660293ba19a9f5386f8357c9dfa377/images/thehermit.png)"></span>
        </div>
        <div class="result-card-text">
          <h3>
            The Hermit
          </h3>
          <div>
            <p>
              The Hermit symbolizes introspection, solitude, and wisdom. It encourages you to seek clarity and understanding through quiet reflection and self-exploration. The card suggests a period of introspective retreat to find your true path or deeper insight within.
            </p>
          </div>
        </div>
      </div>
      <div class="result-card result-card-8">
        <div class="result-card-img">
          <span style="background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_fa8728d25e2b890dd6dfc83b836142569b660293ba19a9f5386f8357c9dfa377/images/thelovers.png)"></span>
        </div>
        <div class="result-card-text">
          <h3>
            The Lovers
          </h3>
          <div>
            <p>
              The Lovers card represents love, harmony, and partnership. It often symbolizes a deep connection or a choice that must be made in relationships, whether romantic or otherwise. The card speaks to the importance of alignment with one\u0027s values and the power of unity.
            </p>
          </div>
        </div>
      </div>
      <div class="result-card result-card-9">
        <div class="result-card-img">
          <span style="background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_fa8728d25e2b890dd6dfc83b836142569b660293ba19a9f5386f8357c9dfa377/images/themoon.png)"></span>
        </div>
        <div class="result-card-text">
          <h3>
            The Moon
          </h3>
          <div>
            <p>
              The Moon represents illusion, intuition, and the subconscious. It invites you to explore the mysteries of the mind and embrace your intuition while navigating uncertainty and confusion. The card suggests that things may not be as they seem and calls for reflection and careful observation of hidden truths.
            </p>
          </div>
        </div>
      </div>
      <div class="result-card result-card-10">
        <div class="result-card-img">
          <span style="background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_fa8728d25e2b890dd6dfc83b836142569b660293ba19a9f5386f8357c9dfa377/images/thedeath.png)"></span>
        </div>
        <div class="result-card-text">
          <h3>
            The Death
          </h3>
          <div>
            <p>
              Death represents transformation, endings, and new beginnings. It signifies the conclusion of one phase of life, making way for rebirth or renewal. This card invites you to let go of the past and embrace change, as it holds the potential for personal growth and a fresh start.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>

The HTML version follows a similar structure, but the entire game mechanic is implemented using the `:checked` input states linked to `label` tags.

All input elements are placed at the very top of the code. Do not move them, as the CSS styles rely on the `~` selector, which is strictly tied to the code structure. Changing the markup could cause the game to stop working.

Additionally, an input has been added for the first card to create the “deck opening” animation. There is also an input for the “Get My Reading” button, as well as an individual input for each of the cards available for selection (in our example, there are 10).

A nuance of this version of the game is that we cannot display random cards. Therefore, the code includes descriptions for 10 specific cards, matching the number of cards available for selection.

You can change the image for the card back here:

These styles open the deck. Essentially, the `left` position is adjusted for each card:

In addition, the cards already have transition styles defined, which add animation:

Here is what the style that shifts a card upward when it is selected looks like:

The code also includes styles that govern how card descriptions are displayed. Each selected card corresponds to a specific, unchanging result:

Fallback version

Finally, we have our fallback version, which is required for email clients that don’t support HTML5, CSS3, or AMP. It will feature a layout similar to that of our mechanic, but without interactivity. In this example, the fallback will be an image of a deck of cards.

We continue working within the block containing the interactive HTML that we created above. Insert the following code between the </style> tag and the <div> tag.

<!--[if !mso]><!-- -->
<input type="checkbox" id="fallback_ctrl" checked class="fallback_ctrl" style="display: none !important; mso-hide: all">
<!--<![endif]-->
<!-- FALLBACK -->
<span id="fallback" class="fallback">
  <table width="100%">
    <tbody>
      <tr align="left">
        <td>
          <a target="_blank" href="https://viewstripo.email/94d9d4a9-ad74-40c8-a238-7893e5636d531759400869904?type=amphtml">
            <img alt="" width="115" height="200" src="https://zlnfb.stripocdn.email/content/guids/CABINET_f42450335403b704e1ff2fb2e84b2b2f49ebe2c3d0d93fcdfcbabb22543134cc/images/tarotback.png" style="display: block">
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</span>
<!-- /FALLBACK -->
<!--[if !mso]><!-- -->
<!-- INTERACTIVE ELEMENT -->
<div class="container" style="mso-hide: all; display: none">

In addition, at the very end of the code, paste this important piece to make it look like this:

</div><!-- /INTERACTIVE ELEMENT -->
<!--<![endif]-->

To change the fallback image and the link that opens when the image is clicked, replace these links here:

The last things to add are the styles that ensure only the version suitable for the email client is displayed. Insert this code at the very end of the `<style>` tag so that it looks like this:

/* --- */ @media screen and (-webkit-min-device-pixel-ratio: 0) { input.fallback_ctrl:checked~.container { display: block !important; } input.fallback_ctrl:checked~#fallback { display: none !important; } } [owa] .container { display: none !important; } [class~="x_container"] { display: none !important; } [id~="x_fallback"] { display: block !important; } @media screen and (max-width: 600px) { body[data-outlook-cycle] #fallback { display: block !important; } body[data-outlook-cycle] .container { display: none !important; } } 

Now, let’s break down this piece of code:

<!--[if !mso]><!--><input type="checkbox" id="fallback_ctrl" class="fallback_ctrl" style="display:none !important;mso-hide:all;" checked>

<!--<![endif]-->

This input is used to show or hide the fallback via styles. It’s wrapped in comments <!--[if !mso]><!--> … <!--<![endif]--> to ensure it’s hidden in the Outlook Desktop client.

The <span id=“fallback” class=“fallback”></span> section contains all of our fallback layout. It should have a simple, tabular layout suitable for Outlook. In our example, this is a table with links to the web version. You can create your own layout, but make sure it’s compatible with Outlook.

The styles below are used to hide and show the fallback version. If you remove or comment them out, the fallback version will be visible, and you can customize its design. But don’t forget to re-enable these styles before sending the email.

While these styles don’t have clear rules for each email client, there is a set of hacks that can be used to control the display:

• styles that start with [owa] are used for Outlook;
• the [class~="x_container"] styles are needed for Outlook in case [owa] does not work;
• body[data-outlook-cycle] styles are needed for Outlook on iOS and Android mobile devices;
• mso-hide:all; is used for Outlook.com.

The full code

The game is all set. Here’s the full code of the kinetic HTML part and the fallback version:

<style>
  .tarot-html .cards { position: relative; width: 100%; height: 200px; } .tarot-html .card-first { display: block; width: 115px; height: 200px; position: absolute; top: 0; left: 0; cursor: pointer; } .tarot-html .card { width: 115px; height: 200px; background-position: 0 0; background-repeat: no-repeat; background-size: contain; background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_f42450335403b704e1ff2fb2e84b2b2f49ebe2c3d0d93fcdfcbabb22543134cc/images/tarotback.png); position: absolute; top: 0; left: 0; transition-duration: 0.4s; transition-timing-function: ease-in; cursor: pointer; border: 0; padding: 0; } .tarot-html .card:hover { top: -5px; } .tarot-html .result { display: none; } .tarot-html .result-card { display: none; justify-content: space-between; align-items: flex-start; padding: 15px 0; } .tarot-html .result-card-text { padding: 0 20px; } .tarot-html .result-card-text p { padding-top: 10px; } .tarot-html .result-card-img span { display: block; width: 87px; height: 150px; background-repeat: no-repeat; background-position: center center; background-size: cover; } .tarot-html .es-button { border: 0; cursor: pointer; } .tarot-html .button-block { display: none; } .tarot-html .curtain { display: none; width: 100%; height: 100%; z-index: 99; position: relative; } @media only screen and (max-width: 600px) { .tarot-html .card { width: 76px; height: 133px; } .tarot-html .cards { height: 133px; } .tarot-html .result-card-img span { width: 58px; height: 100px; } .tarot-html .result-card-text { padding-right: 0; } } #card1-input:checked~* .card1, #card2-input:checked~* .card2, #card3-input:checked~* .card3, #card4-input:checked~* .card4, #card5-input:checked~* .card5, #card6-input:checked~* .card6, #card7-input:checked~* .card7, #card8-input:checked~* .card8, #card9-input:checked~* .card9, #card10-input:checked~* .card10 { top: -10px; } #card-first:checked~* .card2 { left: 8%; } #card-first:checked~* .card3 { left: 16%; } #card-first:checked~* .card4 { left: 24%; } #card-first:checked~* .card5 { left: 32%; } #card-first:checked~* .card6 { left: 40%; } #card-first:checked~* .card7 { left: 48%; } #card-first:checked~* .card8 { left: 56%; } #card-first:checked~* .card9 { left: 64%; } #card-first:checked~* .card10 { left: 72%; } #card-first:checked~* .card-first { display: none; } .cards-input:checked~.cards-input:checked~.cards-input:checked~* .button-block, .cards-input:checked~.cards-input:checked~.cards-input:checked~* .curtain { display: block; } #card1-input:checked~* .result-card-1, #card2-input:checked~* .result-card-2, #card3-input:checked~* .result-card-3, #card4-input:checked~* .result-card-4, #card5-input:checked~* .result-card-5, #card6-input:checked~* .result-card-6, #card7-input:checked~* .result-card-7, #card8-input:checked~* .result-card-8, #card9-input:checked~* .result-card-9, #card10-input:checked~* .result-card-10 { display: flex; } #result-button:checked~.cards-container { display: none; } #result-button:checked~.result { display: block; } /* --- */ @media screen and (-webkit-min-device-pixel-ratio: 0) { input.fallback_ctrl:checked~.container { display: block !important; } input.fallback_ctrl:checked~#fallback { display: none !important; } } [owa] .container { display: none !important; } [class~="x_container"] { display: none !important; } [id~="x_fallback"] { display: block !important; } @media screen and (max-width: 600px) { body[data-outlook-cycle] #fallback { display: block !important; } body[data-outlook-cycle] .container { display: none !important; } }
</style>
<!--[if !mso]><!-- -->
<input type="checkbox" id="fallback_ctrl" checked class="fallback_ctrl" style="display: none !important; mso-hide: all">
<!--<![endif]-->
<!-- FALLBACK -->
<span id="fallback" class="fallback">
  <table width="100%">
    <tbody>
      <tr align="left">
        <td>
          <a target="_blank" href="https://viewstripo.email/94d9d4a9-ad74-40c8-a238-7893e5636d531759400869904?type=amphtml">
            <img alt="" width="115" height="200" src="https://zlnfb.stripocdn.email/content/guids/CABINET_f42450335403b704e1ff2fb2e84b2b2f49ebe2c3d0d93fcdfcbabb22543134cc/images/tarotback.png" style="display: block">
          </a>
        </td>
      </tr>
    </tbody>
  </table>
</span>
<!-- /FALLBACK -->
<!--[if !mso]><!-- -->
<!-- INTERACTIVE ELEMENT -->
<div class="container" style="mso-hide: all; display: none">
  <div class="tarot-html">
    <input id="card-first" type="radio" style="display: none">
    <input id="card1-input" type="radio" class="cards-input" style="display: none">
    <input id="card2-input" type="radio" class="cards-input" style="display: none">
    <input type="radio" id="card3-input" class="cards-input" style="display: none">
    <input type="radio" id="card4-input" class="cards-input" style="display: none">
    <input id="card5-input" type="radio" class="cards-input" style="display: none">
    <input id="card6-input" type="radio" class="cards-input" style="display: none">
    <input type="radio" id="card7-input" class="cards-input" style="display: none">
    <input id="card8-input" type="radio" class="cards-input" style="display: none">
    <input type="radio" id="card9-input" class="cards-input" style="display: none">
    <input id="card10-input" type="radio" class="cards-input" style="display: none">
    <input id="result-button" type="radio" style="display: none">
    <div class="cards-container">
      <div class="cards">
        <label for="card1-input" class="card card1"></label>
        <label for="card2-input" class="card card2"></label>
        <label for="card3-input" class="card card3"></label>
        <label for="card4-input" class="card card4"></label>
        <label for="card5-input" class="card card5"></label>
        <label for="card6-input" class="card card6"></label>
        <label for="card7-input" class="card card7"></label>
        <label for="card8-input" class="card card8"></label>
        <label for="card9-input" class="card card9"></label>
        <label for="card10-input" class="card card10"></label>
        <label for="card-first" class="card-first"></label>
        <div class="curtain"></div>
      </div>
      <div class="button-block">
        <table cellpadding="0" width="100%" cellspacing="0">
          <tr>
            <td align="center" class="esd-block-button es-p15t">
              <span class="es-button-border">
                <label for="result-button" class="es-button">
                  Get My Reading
              </label>
            </span>
            </td>
          </tr>
      </table>
    </div>
    </div>
    <div class="result">
      <p style="font-size: 16px">
        The first card will tell you about your
        <b>
          relationship
        </b>
        , the second about your
        <b>
          career
        </b>
        , and the third about
        <b>
          the future
        </b>
        .
      </p>
      <div class="result-card result-card-1">
        <div class="result-card-img">
          <span style="background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_fa8728d25e2b890dd6dfc83b836142569b660293ba19a9f5386f8357c9dfa377/images/thefool.png)"></span>
        </div>
        <div class="result-card-text">
          <h3>
            The Fool
          </h3>
          <div>
            <p>
              The Fool represents new beginnings, innocence, and limitless potential. Symbolizing a leap of faith, this card encourages spontaneity and adventure, urging you to trust in the journey ahead with an open heart and mind. It reminds you to embrace the unknown and take risks, as the path may lead to growth and unexpected opportunities.
            </p>
          </div>
        </div>
      </div>
      <div class="result-card result-card-2">
        <div class="result-card-img">
          <span style="background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_fa8728d25e2b890dd6dfc83b836142569b660293ba19a9f5386f8357c9dfa377/images/thejudgement.png)"></span>
        </div>
        <div class="result-card-text">
          <h3>
            The Judgement
          </h3>
          <div>
            <p>
              Judgement represents awakening, renewal, and transformation. It speaks to the call for personal reckoning or a moment of truth, where past actions are evaluated, and forgiveness or release can occur. The card encourages you to embrace self-reflection and make the necessary changes for growth and renewal.
            </p>
          </div>
        </div>
      </div>
      <div class="result-card result-card-3">
        <div class="result-card-img">
          <span style="background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_fa8728d25e2b890dd6dfc83b836142569b660293ba19a9f5386f8357c9dfa377/images/thehighpriestess.png)"></span>
        </div>
        <div class="result-card-text">
          <h3>
            The High Priestess
          </h3>
          <div>
            <p>
              The High Priestess embodies intuition, mystery, and inner wisdom. She represents the subconscious mind, encouraging you to trust your instincts and seek answers from within. The card invites you to explore deeper knowledge, secrets, and the spiritual realm, emphasizing the importance of silence and reflection.
            </p>
          </div>
        </div>
      </div>
      <div class="result-card result-card-4">
        <div class="result-card-img">
          <span style="background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_fa8728d25e2b890dd6dfc83b836142569b660293ba19a9f5386f8357c9dfa377/images/theworld.png)"></span>
        </div>
        <div class="result-card-text">
          <h3>
            The World
          </h3>
          <div>
            <p>
              The World symbolizes completion, wholeness, and fulfillment. It represents the successful culmination of a journey, bringing a sense of achievement, balance, and unity. This card reflects the harmonious integration of all aspects of your life and encourages celebration of your accomplishments and the readiness for new beginnings.
            </p>
          </div>
        </div>
      </div>
      <div class="result-card result-card-5">
        <div class="result-card-img">
          <span style="background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_fa8728d25e2b890dd6dfc83b836142569b660293ba19a9f5386f8357c9dfa377/images/thetemperance.png)"></span>
        </div>
        <div class="result-card-text">
          <h3>
            The Temperance
          </h3>
          <div>
            <p>
              Temperance symbolizes balance, harmony, and moderation. It encourages blending opposing forces with patience and grace, finding equilibrium in your life. The card invites you to be patient, tempering extremes and fostering peace through careful adjustment and self-control.
            </p>
          </div>
        </div>
      </div>
      <div class="result-card result-card-6">
        <div class="result-card-img">
          <span style="background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_fa8728d25e2b890dd6dfc83b836142569b660293ba19a9f5386f8357c9dfa377/images/thehangedman.png)"></span>
        </div>
        <div class="result-card-text">
          <h3>
            The Hanged Man
          </h3>
          <div>
            <p>
              The Hanged Man symbolizes surrender, perspective, and letting go. It suggests a pause or a need to release old habits, attachments, or ways of thinking. The card invites you to look at situations from a new angle and trust that time and patience will bring clarity and transformation.
            </p>
          </div>
        </div>
      </div>
      <div class="result-card result-card-7">
        <div class="result-card-img">
          <span style="background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_fa8728d25e2b890dd6dfc83b836142569b660293ba19a9f5386f8357c9dfa377/images/thehermit.png)"></span>
        </div>
        <div class="result-card-text">
          <h3>
            The Hermit
          </h3>
          <div>
            <p>
              The Hermit symbolizes introspection, solitude, and wisdom. It encourages you to seek clarity and understanding through quiet reflection and self-exploration. The card suggests a period of introspective retreat to find your true path or deeper insight within.
            </p>
          </div>
        </div>
      </div>
      <div class="result-card result-card-8">
        <div class="result-card-img">
          <span style="background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_fa8728d25e2b890dd6dfc83b836142569b660293ba19a9f5386f8357c9dfa377/images/thelovers.png)"></span>
        </div>
        <div class="result-card-text">
          <h3>
            The Lovers
          </h3>
          <div>
            <p>
              The Lovers card represents love, harmony, and partnership. It often symbolizes a deep connection or a choice that must be made in relationships, whether romantic or otherwise. The card speaks to the importance of alignment with one\u0027s values and the power of unity.
            </p>
          </div>
        </div>
      </div>
      <div class="result-card result-card-9">
        <div class="result-card-img">
          <span style="background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_fa8728d25e2b890dd6dfc83b836142569b660293ba19a9f5386f8357c9dfa377/images/themoon.png)"></span>
        </div>
        <div class="result-card-text">
          <h3>
            The Moon
          </h3>
          <div>
            <p>
              The Moon represents illusion, intuition, and the subconscious. It invites you to explore the mysteries of the mind and embrace your intuition while navigating uncertainty and confusion. The card suggests that things may not be as they seem and calls for reflection and careful observation of hidden truths.
            </p>
          </div>
        </div>
      </div>
      <div class="result-card result-card-10">
        <div class="result-card-img">
          <span style="background-image: url(https://zlnfb.stripocdn.email/content/guids/CABINET_fa8728d25e2b890dd6dfc83b836142569b660293ba19a9f5386f8357c9dfa377/images/thedeath.png)"></span>
        </div>
        <div class="result-card-text">
          <h3>
            The Death
          </h3>
          <div>
            <p>
              Death represents transformation, endings, and new beginnings. It signifies the conclusion of one phase of life, making way for rebirth or renewal. This card invites you to let go of the past and embrace change, as it holds the potential for personal growth and a fresh start.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- /INTERACTIVE ELEMENT -->
<!--<![endif]-->

Wrapping up

A tarot game is another easy way to stand out from the crowd and make your emails more engaging. This game is easy to create and adapt to any occasion, visually and in terms of content. Feel free to use it for your own newsletters, and tweak its design and text to fit your marketing ideas.