JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<script src="https://media-editor.cloudinary.com/all.js" type="text/javascript">  
</script>

CSS

#cld-media-editor-iframe {
  z-index: 100 !important
}

JavaScript

const myEditor = cloudinary.mediaEditor();
myEditor.update({
  publicIds: [
    'mew/Travel/assets/01'
  ],
  cloudName: 'product-demos',
  image: {
    steps: [
      'resizeAndCrop',
      'imageOverlay',
      'textOverlays',
      'export'
    ],
    resizeAndCrop: {
      toggleAspectRatio: true,
      aspectRatioLock: true,
      flip: true,
      rotate: true,
      presets: [
        'original',
        'square',
        'landscape-16:9',
        'landscape-4:3',
        'portrait-3:4',
        'portrait-9:16'
      ]
    },
    imageOverlay: {
      overlays: [
        {
          publicId: 'mew/Travel/overlays/01',
          label: '01',
          transformation: [],
          placementOptions: [
            'top_left',
            'top_right',
            'bottom_left',
            'bottom_right',
            'middle'
          ]
        },
        {
          publicId: 'mew/Travel/overlays/02',
          label: '02',
          transformation: [],
          placementOptions: [
            'top_left',
            'top_right',
            'bottom_left',
            'bottom_right',
            'middle'
          ]
        },
        {
          publicId: 'mew/Travel/overlays/03',
          label: '03',
          transformation: [],
          placementOptions: [
            'top_left',
            'top_right',
            'bottom_left',
            'bottom_right',
            'middle'
          ]
        },
        {
          publicId: 'mew/Travel/overlays/04',
          label: '04',
          transformation: [],
          placementOptions: [
            'top_left',
            'top_right',
            'bottom_left',
            'bottom_right',
            'middle'
          ]
        }
      ]
    },
    textOverlays: {
      presets: [
        'heading',
        'subtitle',
        'body',
        'caption'
      ]
    },
    export: {
      quality: [
        'auto',
        'best',
        'good',
        'eco',
        'low'
      ],
      formats:...